造型和飛鏢

我使用的代碼相當於例如聽力模板自定義元素項是：

class proto extends HtmlElement { 
    static final tag = 'x-foo-from-template'; 
    factory proto()=>new Element.tag(tag); 

    proto.created() : super.created(){ 


     // 1. Attach a shadow root on the element. 
     var shadow = this.createShadowRoot(); 

     // 2. Fill it with markup goodness. 
     var t = new TemplateElement(); 
        t..id="sdtemplate" 
        ..innerHtml = """ 
         <style> 
          p { color: orange; } 
          </style> 
          <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p> 
          <button>click</button> 
        """; 

     var span = t.content.querySelector('span'); 
     span.text= "hello "+span.text; 

     var btn = t.content.querySelector('button'); 
     btn..onClick.listen((e) => print('hello')); 

     shadow.nodes.add(t.content.clone(true)); 
    }  
    }

的代碼顯示的語句和按鈕，但以下沒有工作：1。造型，什麼也沒有風格，我與開發工具檢查，發現這個輸出的「刪除不允許的元素」， 2.OnClick.listen爲按鈕

有什麼想法？

來源

2014-10-09 Hasan A Yousef

您正在使用t.content來查詢按鈕，但是您正在分配innerHTML以獲取HTML。但是模板中沒有內容元素。所以你必須修復你猜的HTML代碼。 – Robert 2014-10-09 04:01:27

不讓你@羅伯特，你想讓我寫什麼而不是innerHtml？ – 2014-10-11 12:08:54

要使用't.content'，您必須在您的HTML代碼中添加一個''元素... – Robert 2014-10-12 11:11:57

我發現只有在模板被克隆和調用之後才能聽到模板中的項目，並且可以將Listener添加到調用模板的腳本中，這適用於Dart和JS。要將事件偵聽器添加到模板項目中，我們必須向上一步，然後使用「自定義元素」。

來源

2016-04-18 07:59:20

回答

相關問題