Web组件-编程知识

开发者使用Vue、React等框架来使用及创建定制的组件，Web组件是浏览器原生支持的替代这些框架的特性，主要涉及相对比较新的三个Web标准。这些Web标准允许JS使用新标签扩展HTML，扩展后的标签就是自成一体的、可重用的UI组件。

1 HTML模版

DocumentFragment是一种Node类型，可以临时充当一组同辈节点的父节点，方便将这些同辈节点作为一个单元来使用。可以使用document.createDocumentFragment()来创建DocumentFragment节点。创建DocumentFragment节点后，可以像使用Element一样。

DocumentFragment与Element的区别是在于它没有父节点，当向文档中插入DocumentFragment节点时，DocumentFragment本身并不会被插入，实际上插入的是它的子节点。

1.1 <template>标签

<template>标签及其子元素永远不会被浏览器渲染，其对应的是一个HTMLTemplateElement对象，这个对象只定义了一个content属性，该属性值是包含<template>所以子节点的DocumentFragment。

可以深度克隆这个DocumentFragment,然后把克隆的副本插入文档中需要的地方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<template id="tep"><div class="grid"></div>
</template>
<div class="block"><span>hello block</span>
</div>
</body>
<script>let tep = document.querySelector("#tep");let block = document.querySelector(".block");block.append(tep.content.cloneNode(true));//深度克隆block.append(tep.content.cloneNode(true));
</script>
</html>
<style>.grid{width: 50px;height: 50px;background: blue;margin: 10px;}
</style>

2 自定义元素

customElement.define()方法用来自定义元素。第一个参数是标签名（必须包含一个连字符），第二个参数是HTMLElement的子类。

浏览器会自动调用自定义元素类的特定“生命期方法”，当自定义元素被插入文档时，会调用connectedCallback()方法；当自定义元素从文档中被移除时会调用disconnectedCallback()方法。

如果自定义元素定义了静态的observedAttributes属性，其值为一个属性名的数组，且如果任何这些命名属性在这个自定义元素的一个实例上被设置（或修改），浏览器会调用attributeChangeCallback()方法。这个回调可以根据属性值的变化采取必要的步骤以更新组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="createCus()">添加元素</button>
<button onclick="removeCus()">移除元素</button>
<button onclick="addSize()">增加尺寸</button>
<button onclick="changeColor()">修改颜色属性</button>
<div id="block"></div>
</body>
</html><script>class CustomCircle extends HTMLElement {connectedCallback() {this.style.borderRadius = "50%";this.style.border = "solid black 1px"this.style.display = "block"this.style.width = "50px";this.style.height = "50px";this.classList.add("custom")this.customSize = 50;console.log("元素被添加到文档");}disconnectedCallback() {console.log("元素被移除");}static get observedAttributes() {return ["cus"];}get size() {return this.customSize;}set size(val) {this.customSize = val;this.style.width = val + "px";this.style.height = val + "px";}attributeChangedCallback(name,oldVal,newVal) {this.style.background = newVal;console.log(name,oldVal,newVal);}}customElements.define("custom-circle",CustomCircle);function createCus() {let cus = new CustomCircle();document.querySelector("#block").append(cus);}function removeCus() {let cus = document.querySelector(".custom")if (cus)  cus.remove();}function addSize() {let cus = document.querySelector(".custom")if (cus) {cus.size = cus.size + 10;}}function changeColor() {let cus = document.querySelector(".custom")cus.setAttribute("cus","yellow");}</script>

2.1 组件渲染过程

浏览器在解析HTML文档时，当在Web组件还没有定义就遇到其标签时，浏览器会向DOM树中添加一个通用的HTMLElement，即便它们不知道要对它做什么。之后，当自定义元素有定义之后，这个通用元素会被“升级”，从而具备预期的外观与行为。

如果Web组件包含子元素，那么在组件有定义之前它们可能会被不适当地显示出来。可以使用下面的CSS将Web组件隐藏到它们有定义为止。（:not(:defined)）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<cus-ele><span>hello</span>
</cus-ele>
<cus-ele class="cus"><span>hello</span>
</cus-ele>
</body>
</html><style>
.cus:not(:defined) {opacity: 0;
}
</style>

3 影子DOM

Shadom DOM为封装而生，它可以让一个组件拥有自己的“影子”DOM树，这个DOM树不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。

3.1 在浏览器中查看组件的影子DOM

浏览器在内部使用DOM/CSS来绘制影子DOM，这个DOM结构一般对用户是隐藏的，但我们可以开发者工具中看见它。在Chrome中，需要打开“Show user agent shadow DOM”选项。

图 <video>标签的影子DOM

我们不能使用一般的JS调用或者选择器来获取shadow DOM 元素，它们不是常规的子元素，而是一种封装手段。

3.2 为元素添加影子DOM

影子DOM允许把一个“影子根节点”附加给一个常规的HTML元素（或自定义元素），后者被称为“影子宿主”(shadow host)。

attachShadow方法是为常规元素附加一个影子根节点，其参数为一个ShadowRootInit类型的对象，其返回一个影子根节点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="block"></div>
</body>
</html><script>class CustomEle extends HTMLElement {connectedCallback() {this.style.display = "block";this.style.width = "100px";this.style.height = "100px";this.style.border = "solid black 1px";let shadow = this.attachShadow({mode: 'closed'})shadow.innerHTML = "<div>hello shadow</div>"}}customElements.define("custom-ele",CustomEle);let cus = new CustomEle();document.querySelector(".block").append(cus);console.log(cus.shadowRoot); //如果mode 为open则有值，否则为空
</script>