造型和飞镖

我使用的代码相当于例如听力模板自定义元素项是：

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

回答

相关问题