# 期待Web Component的未来 Web Component 本身不是一个规范，而是一组技术的应用，Web Component 现阶段主要分为三部分：`Custom element`、`Shadow DOM`、`Template`。通过它们的搭配使用，可以让我们在不借助第三方框架（react，vue）的情况下，构建独立的，可重用的自定义组件。 ## Custom element(自定义元素) Custom element 是一组 javasrcipt API，它允许我们自定义一些定制元素及行为。 ```html

``` ![demo](01.png) js 提供了`customElements.define` api，用来注册自定义元素，customElements.define()接收三个参数： - 符合命名标准的参数名称（不能是单个单词，且必须要有短横线） - 用于定义行为的类 - 可选参数：一个包含 `extends`属性的配置对象，指定所创建元素继承于哪个内置的 HTML 元素。 Custom element 有两种定义元素的方式，没有传递第三个参数表示独立创建，不继承内置元素。在使用时可以直接写成 HTML 标签的形式来使用，例如`` 或者通过 js 创建`document.createElement(“word-count”)` 。若在定义元素时指定了所扩展的元素，表示继承创建。在使用时则需要先写出基本的元素标签，并通过`is` 指定所扩展的元素。 ```jsx customElements.define('word-count', WordCount, { extends: 'p' }); // 使用方式

; // 或 document.createElement('p', { is: 'word-count' }); ``` 它还可以指定一些回调函数，它们将在元素不同的生命时期被调用 - `connectedCallback`：当 custom element 首次被插入文档 DOM 时，被调用。 - `disconnectedCallback`：当 custom element 从文档 DOM 中删除时，被调用。 - `adoptedCallback`：当 custom element 被移动到新的文档时，被调用。 - `attributeChangedCallback`: 当 custom element 增加、删除、修改自身属性时，被调用。 ```jsx class boxDiv extends HTMLElement { static get observedAttributes() { return ['class', 'style']; } constructor() { super(); this.style.color = this.getAttribute('color'); this.append(this.getAttribute('text')); } public connectedCallback() { console.log('元素插入DOM中.'); } public disconnectedCallback(){ console.log('元素被删除.'); } public adoptedCallback(){ console.log('元素被移动.'); } public attributeChangedCallback(name, oldValue, newValue){ console.log('元素属性变更.' name，oldValue， newValue); } } ``` > 注：想在某个元素属性变化后，触发`attributeChangedCallback()`回调函数，需要先必须监听这个属性。这可以通过定义`observedAttributes()` get 函数来实现，`observedAttributes()` > 函数体内包含一个 return 语句，返回一个数组，包含了需要监听的属性名称。监听后。每当元素的属性变化时，`attributeChangedCallback()`回调函数会执行。我们可以查看属性的名称、旧值与新值。通过这些生命周期函数，我们可以动态的变更我们的 web 组件。 ## Shadow DOM（影子 DOM） Shadow DOM 也有一组 javascript API，他不是一个新事物，它允许我们在常规 DOM 元素上附加一个独立隐藏的特殊类型 DOM 元素。这部分的代码与外部代码相互隔离。内部的任何代码都无法影响外部。通过 Shadow DOM 和 Custom element 搭配的方式，可以保证自定义元素的独立。使其不会影响到它外部的元素。 ![在这里插入图片描述](02.png) ### 基本用法可以使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed： ```jsx let shadow = elementRef.attachShadow({ mode: 'open' }); let shadow = elementRef.attachShadow({ mode: 'closed' }); ``` `open` 表示可以通过页面内的 javascript 方法来获取 Shadow DOM。 ```jsx let myShadowDom = myCustomElem.shadowRoot; ``` 如果你将一个 Shadow root 附加到一个 Custom element 上，并且将 mode 设置为 closed，那么就不可以从外部获取 Shadow DOM 了。`myCustomElem.shadowRoot` 将会返回 null。 ### 实现一个简单的 tooltip ```jsx button ``` 定义一个自定义 DOM，然后创建一个 shadowDOM，给 shadowDOM 新增子标签`style` `titleSpan` `infoSpan` 。最后将 shadowDOM 附加到自定义 DOM 上。一个简单的 tooltip 就实现了。 ![](03.gif) 目前看起来还有一些问题，比如我写 style 的方式是用模版字符串写的。比如我用的 jsAPI 生成的 dom 元素。可读性较差。再比如目前的提示信息只接收字符串，不支持 DOM 类型。这些问题可以使用 template 和 slot 来解决。 ## HTML template（HTML 模板） HTML a 提供了` ``` 这段代码不会在页面中呈现，但却可以通过`document.querySelector()` 等 API 获取 ```jsx let template = document.querySelector('#my-paragraph'); ``` 标签则允许我们在模版中定义占位符，在使用该模版时，该占位符可以填充所需的任何 HTML 标记片段。通过`