自定義元素/暗影根在DART郎VS影子根在JavaScript

我的這個例子http://jsfiddle.net/fyf6thte/8/用JavaScript可以正常使用這個陰影元/根，有興趣的也有類似的一個與DART，所以我寫了下面的代碼（使用同樣的HTML和CSS文件），但我無法看到它的外觀shadow.innerHTML = '<button id="d">click</button>'按鈕不工作自定義元素/暗影根在DART郎VS影子根在JavaScript

完整的代碼是：

import 'dart:html'; 

void main() { 
    var thehost = document.querySelector('#host1'); 
    document.registerElement(fonixDiv.tag, fonixDiv); 
    thehost.append(new fonixDiv()); 
} 

class fonixDiv extends HtmlElement { 
static final tag = 'fonix-div'; 
var shadow; 

bool disabled; 

factory fonixDiv() => new Element.tag(tag); 

fonixDiv.created() : super.created() { 

shadow = this.createShadowRoot(); 

shadow.host.innerHTML = '<button id="d">click</button>'; 

shadow.host.onClick.listen((e){ 
       this.host.dataset.disabled='true'; // set Attribute to the custom element 
      }); 


shadow.children.d.onClick.listen((e){ 
    this.text = "you clicked me :("; 
    // or shadow.children[0].textContent="Shadow DOM content changed"; 
    this.disabled=true; 
    // alert("All: button, text and host should be change"); 
}); 
} 

@override 
void attached() { 
super.attached(); 
this.disabled=disabled; 
} 
}

我不知道有關的準確性代碼的平衡，我只能在看到按鈕後才能檢查它。

任何幫助。

來源

2015-02-07 Hasan A Yousef

錯誤是正確的：在飛鏢'這'沒有根據上下文在JS中綁定，而是我們有詞彙範圍;

在DART代碼，你實際上是改變，而不是事件（在陰影根的按鈕）的目標的自定義元素的文本內容。所以基本上你有一個自定義元素，你在其上設置了文本內容，但是你也有一個在同一個DOM節點內部創建的影子根，並且它隱藏了你在這個自定義元素中放置的所有內容，這就是爲什麼你沒有看到它並且繼續看到影子根的內容 - 這就是影子根的工作原理。

要解決它，你需要更新按鈕上的文本內容（和殘疾人屬性）（例如e.target.text = ...）。

希望這會有所幫助。

來源

2015-08-02 22:12:38

感謝您的解釋，併爲dartpad：https://dartpad.dartlang.org/2bf5c077f02af8790d40 – 2015-08-03 05:28:12

好像.host應該從這個線

shadow.host.innerHTML = '<button id="d">click</button>'; 

shadow.innerHTML = '<button id="d">click</button>';

的的jsfiddle沒有它，它似乎不可思議被刪除。我認爲與.host你基本上將它添加到this，因此作爲孩子而不是內容。

來源

2015-02-07 13:40:23

同樣的事情，沒有什麼顯示，可我從以前的試驗中添加。主持人誤。 – 2015-02-07 19:10:57

我認爲主要問題是：使用innerHtml而不是innerHTML。

有你需要修復一些額外的小事情：

刪除「主機」，因爲岡特說，你要設置陰影的innerHTML。
而不是shadow.children.d.onClick，做shadow.querySelector（ '＃d'）的onClick。
另外，做數據集['禁用']而不是dataset.disabled。

來源

2015-08-02 20:16:50 buraq

Thanks @buraq，按鈕出現，但其屬性不會改變點擊按要求在功能！我得到這個dartpad https://dartpad.dartlang.org/7d8a8fa96544dacb8eb9 – 2015-08-02 21:38:29

自定義元素/暗影根在DART郎VS影子根在JavaScript

回答

相關問題