如何聲明性地創建自定義HTML元素？

我試圖創建自定義元素，但有麻煩。我read so many docs，但他們都似乎過時或不足，因爲超級新的和不斷變化的技術。有沒有人知道如何解決這個問題？當前上下文（this）沒有register，我也無法更新模板。我在正確的軌道上嗎？如何聲明性地創建自定義HTML元素？

<my-date><my-date> 

    <element name="my-date"> 
    <template> 
     <style> 
     div { 
      color: red; 
     } 
     </style> 
    </template> 
    <script> 
     this.register({ 
     prototype: { 
      createdCallback: function() { 
      this.innerHTML = new Date(); 
      } 
     } 
     }); 
    </script>

http://jsbin.com/oGUKeyU/3/

來源

2014-01-24 TruMan1

什麼是「註冊」應該是 –

要註冊新的自定義元素，我認爲。我在各種博客和文檔中看到這些。我什至嘗試registerElement像document.registerElement。我試圖通過附加到createdCallback添加新的Date（）到輸出。 – TruMan1

此鏈接'http：// www.html5rocks.com/en/tutorials/webcomponents/customelements /'似乎對我來說工作正常嗎？您是否也看到了演示https://html5-demos.appspot.com/hangouts？如果你通過資料來源，你可以看到他們是如何做到的。 – tftd

@ TruMan1絕對正確。由於一些複雜的時序問題，在規範中使用<element>的聲明性元素註冊是put on hold。

可能發生的情況是Polymer將遍歷幾個不同的時序模型，生命週期方法集等，直到開發人員和瀏覽器供應商找到上述郵件列表中列出的問題的良好解決方案。然後原生<element>註冊將被重新訪問。

來源

2014-01-25 16:30:26 CletusW

您嘗試使用lifecycle HTMLElement API：

var proto = Object.create(HTMLElement.prototype); 

proto.createdCallback = function() {...}; 
proto.attachedCallback = function() {...}; 

var XFoo = document.registerElement('x-foo', {prototype: proto});

你的情況，這將是這樣的：

var proto = Object.create(HTMLElement.prototype); 

proto.createdCallback = function() { 
    this.innerHTML = (new Date()).toString() 
}; 

var xMyDate = document.registerElement('x-my-date', { 
    prototype: proto 
}); 
var newDateElement = new xMyDate(); 

alert(newDateElement.innerHTML);

但這隻能在金絲雀。

來源

2014-01-24 17:10:29 Pinal

但是，這是通過JavaScript做到的，我試圖在 ...標籤中聲明性地做到這一點。我應該能夠以某種方式使用上下文嗎？ – TruMan1

如何聲明性地創建自定義HTML元素？

回答

相關問題