web components

web components：一种原生的写组件的方式。下面将主要介绍四个概念：custom element、shadow DOM、template 和 slot。

示例 demo

一、custom element

创建 custom 元素：customElements.define(name,constructor,options)

name：元素名称、constructor：定义元素主体。具体定义与使用见文档。

其中主要涉及到下面几个概念：

autonomous custom elements：使用时跟使用 html 元素一样。

customized built-in elements： inherit from basic HTML elements。从 html 元素继承而来，使用时会定义 is 属性。demo。

lifecycle callbacks：当元素被添加到 DOM、从 DOM 中移除、被移动、属性更改时会触发的回调函数。connectedCallback \disconnectedCallback \adoptedCallback \attributeChangedCallback

二、shadow DOM

原文较准确：The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. 创建一个与外界隔离的 DOM 结构。

先介绍几个概念：

shadow host：shadow 载体节点，添加 shadow root 的 DOM 节点。

shadow tree：类似与 dom tree 的概念。

shadow root：shadow 根节点。

基本使用：

创建 shadow：Element.attachShadow({ mode: 'open' })

可通过设置参数 mode 为 ‘open’/‘closed’，来确定是否允许外部 js 调用该 shadow。

三、template 和 slot

template 主要解决写重复模块的问题。template 可单独使用，需要通过 js 调用才能添加到 DOM 中。与 custom element 结合使用更方便。

添加 slot 后，可以动态地往 template 中添加自定义片段。

注意：样式需添加 style 元素才生效。