Web Components 笔记

参考学习：MDN Web Components

关键字：ES2015类的自定义元素写法、全局声明自定义元素、shadowroot,生命周期事件

一、Es2015的自定义元素类

0、有自治元素和自定义内置元素两种情况。

        自治元素必须继承自HTMLElement , 

         自定义内置元素继承自相应的元素类，HTMLXXXElement。

1、构造函数优先调用super()

2、创建shadow root后，才能插入标准元素,style等  。       shadow是具有正常Dom的方法，它的继承链：shadow= ShadowRoot类型=>DocumentFragment=>Node=>EventTarget =>Object       shadow可以附加到任何元素之上。

var shadow = this.attachShadow({mode: 'open'});

3、获取元素上自定义属性，是否有某属性（标准Dom方法）

var text    = this.getAttribute('text');
var bHasImg = this.hasAttribute('img')

4、生命周期

• connectedCallback：当 custom element首次被插入文档DOM时，被调用。
• disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
• adoptedCallback：当 custom element被移动到新的文档时，被调用。
• attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。必须指定要监听的属性， static get observedAttributes() {return ['w', 'l']; }

5、使用<template>插入元素

      var template = document.getElementById('element-details-template').content;
      shadowRoot.appendChild(template.cloneNode(true));

<template> 标记内部支持“具名的slot",  比如这样：<slot name="element-name"> 在使用自定义元素时，标记内部    <span slot="element-name">slot</span>    来替换占位slot。

二、声明标记

1、自治元素

customElements.define('popup-info', PopUpInfo);

2、自定义内置元素

customElements.define('expanding-list', ExpandingList, { extends: "ul" });

三、使用标记

1、自治元素

<popup-info img="img/alt.png" text="Your "/>

document.createElement("popup-info")

2、自定义内置元素

<ul is="expanding-list">
  ...
</ul>

四、总结

本以为自定义有许多内容要记录，实际却没有多少新知识、新API，它所使用的大都是DOM的操作!