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 组件状态的整个生命周期中自动调用六个方法。

1. 构造函数（） : 组件初始化时调用。它必须调用 super() 并且可以设置任何默认值或执行其他预渲染过程。
2. 连接回调（） : 当自定义元素第一次连接到文档的 DOM 时调用。
3. 断开回调（） : 当自定义元素与文档的 DOM 断开连接时调用。
4. 通过回调（） ：当 Web 组件从一个文档移动到另一个文档时调用此函数。
5. 属性更改回调（） ：在添加、删除或更改自定义元素的属性之一时调用。
6. 静态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 组件示例：

1. 柜台 ： Codepen 演示
2. 编辑词： Codepen 演示

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39128/21262510