如何声明性地创建自定义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元素？

回答

相关问题