深入了解 Web Components --- 面向未来设计

默认分类 2019/04/18 08:09

ppt地址：
http://haiyang.me/webcomponent/index.html
http://haiyang.me/webcomponent/fe2016.pptx

Custom Elements v1:

<script>
customElements.define('x-foo', class extends HTMLElement {
  constructor() {
    super()
  }
  // 相当于v0中的attachedCallback
  connectedCallback() {
    this.innerHTML = 'Hello ' + this.id
  }
})
</script>
<x-foo id="a"></x-foo>
<x-foo id="b"></x-foo>

Custom Elements v0:

var Mytag = document.registerElement('my-tag');
document.body.appendChild(new Mytag());

var mytag = document.getElementsByTagName('my-tag')[0];
mytag.textContent = 'I am a my-tag element.';
mytag.style.border = '1px solid green'

>> 留言评论