Web Components

WebComponents

原生自定义组件的管理与复用

技术点：

Custom elements

customElements.define('your-component',js
  class extends HTMLElement {
    constructor() {
      super();
      // 组件的功能代码写在这里
    }
  }
);

Shadow DOM

让组件内的各个元素和DOM隔离，自定义组件内部的各种元素对外不可见{model:closed}

HTML templates

它可以让你用原生html、css、js语言来编写组件。

 <template id='your-component-template'>
<!-- 这里编写组件的结构、样式、脚本等 -->
 </template>
 <script>
   customElements.define('your-component',
     class extends HTMLElement {
       constructor() {
         super();
         let template = document.getElementById('your-component-template');
         let templateContent = template.content;
         const shadowRoot = this.attachShadow({ mode: 'closed' });
         shadowRoot.appendChild(templateContent.cloneNode(true)); // 克隆template内部内容添加到ShadowDOM中
       }
     }
   );
 </script>

Template slot

为影子树中的该元素提供了一个插槽。

  <template id='your-component-template'>
	<!-- 这里编写组件的结构、样式、脚本等 -->
	<slot name="a">  slot something</slot>
  </template>

//use
  <my-component>
      <span slot='a'></span>
  </my-component>