2022.8.11 - Web Components的基本知识

Web Components概念

Shadow DOM（影子 DOM）

Shadow DOM教程：https://zh.javascript.info/shadow-dom

MDN(Shadow DOM教程)：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM

autonomous custom element （独立自定义元素）

customized built in element（自定义内置元素）

构造函数的四个钩子

connectedCallback：当 custom element 首次被插入文档 DOM 时，被调用。 disconnectedCallback：当 custom element 从文档 DOM 中删除时，被调用。 adoptedCallback：当 custom element 被移动到新的文档时，被调用。 attributeChangedCallback: 当 custom element 增加、删除、修改自身属性时，被调用。