JavaScript 中的 Web 组件介绍：创建一个 hello-world 的 Web 组件
JavaScript 中的 Web 组件介绍：创建一个 hello-world 的 Web 组件
Web Components 是一套不同的技术，允许您创建可重用的自定义 html 元素。它的伟大之处在于对组件的逻辑和样式的封装。我们可以将元素的特征保密，这样就可以编写脚本和设置样式，而不必担心与文档的其他部分发生冲突。
Web Components 由三种主要技术组成：
-
自定义元素 ：一组 JavaScript API，允许您定义新的自定义 HTML 标签或改进现有标签。
类 MyComponent 扩展 HTMLElement {
构造函数（）{
极好的（）;
this.innerHTML =<p>我的网络组件</p>;
}
}customElements.define('my-component', MyComponent);
-
影子 DOM： 一组 JavaScript API，用于将封装的“影子”DOM 树附加到与主文档 DOM 分开呈现的元素。 Shadow DOM 确保我们为 Web 组件定义的样式或 JavaScript 不会泄漏并影响应用程序的其他部分。
您可以使用 Element.attachShadow() 方法将阴影根附加到任何元素。const shadow = this.attachShadow({mode: 'open'});
- HTML 模板： 模板允许您在页面中定义 Web 组件可以使用的 HTML。模板及其内容不会在 DOM 中呈现，但仍可以使用 JavaScript 引用。
笔记 : 还有您可以使用它来管理元素的内容。
生命周期方法
浏览器在 Web 组件状态的整个生命周期中自动调用六个方法。
- 构造函数（） : 组件初始化时调用。它必须调用 super() 并且可以设置任何默认值或执行其他预渲染过程。
- 连接回调（） : 当自定义元素第一次连接到文档的 DOM 时调用。
- 断开回调（） : 当自定义元素与文档的 DOM 断开连接时调用。
- 通过回调（） ：当 Web 组件从一个文档移动到另一个文档时调用此函数。
- 属性更改回调（） ：在添加、删除或更改自定义元素的属性之一时调用。
- 静态observedAttributes() :返回浏览器将观察到的属性数组。
创建一个网页组件：
自定义元素
我们需要定义一个类来控制元素。它可以命名任何东西，我们称之为HelloWorld。它必须扩展 HTMLElement 接口，该接口代表每个 HTML 元素的默认属性和方法。
类 HelloWorld 扩展 HTMLElement {
构造函数（）{
极好的（）;
this.textContent = 'Hello World!';
}
}
该类必须向 CustomElementRegistry 注册，才能将其定义为特定元素的处理程序。名称必须包含破折号，以免与 HTML 规范中正式支持的元素发生冲突。
customElements.define('hello-world', HelloWorld);
添加属性
到目前为止，我们的组件只在屏幕上打印 hello world。为了使问候语动态化，我们可以添加 HTML 属性：
<hello-world name="Ankit"></hello-world>
并且 textContent 将更改如下：
类 HelloWorld 扩展 HTMLElement {
构造函数（）{
极好的（）;
this.textContent = `你好 ${this.getAttribute("name")}!`;
}
}
影子王国
虽然我们在上面构建的 Web 组件可以正常工作，但它不能免受外部干扰，CSS 或 JavaScript 可以修改它。我们为组件定义的样式可能会泄漏并影响文档的其他部分。为了防止这种情况发生，我们需要创建一个 shadow dom。 Shadow DOM 通过将分离的 DOM 附加到 Web 组件来解决这个封装问题。 Shadow DOM 可以像任何其他 DOM 元素一样被操作
this.shadow = this.attachShadow({ mode: "open" });
- { mode: “open” } — 这意味着我们可以使用在主页面上下文中使用 Element.shadowRoot 属性编写的 JavaScript 访问 shadow DOM。
- { mode: “closed” } — 这意味着 Shadow DOM 只能在 Web 组件内访问。如果您使用 { mode: “closed”} 将影子根附加到自定义元素，您将无法从外部访问影子 DOM，即 Element.shadowRoot 将返回 null。
HTML 模板：
在这里，我们可以为我们的 Web 组件定义 html 和 css。
常量模板 = document.createElement("模板");
模板.innerHTML = `
<style>
.你好世界 h1 {
字体粗细：粗体；
字体系列：无衬线；
红色;
}
</style>
<div class="hello-world">
<h1>你好<span id="name"></span>！</h1>
</div>
`;
更新构造函数以将我们的模板附加到 shadow DOM 并将 name 的初始值设置为“World”：
构造函数（）{
极好的（）;
this.shadow = this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.querySelector("#name").innerText = "World";
}
现在我们还可以使用observedAttributes 和attributeChangedCallback 方法在我们的Web 组件添加到DOM 时更新名称。
静态获取observedAttributes() {
返回[“名称”]；
}
属性更改回调（属性，旧值，新值）{
如果（旧值 === 新值）返回；
这个[属性] = newValue;
}
连接回调（）{
this.shadowRoot.querySelector("#name").innerText = this.name;
}
完整的JS代码：
完整代码： Codepen 演示
更多 Web 组件示例：
- 柜台 ： Codepen 演示
- 编辑词： Codepen 演示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
