你好，我是沐爸，欢迎点赞、收藏、评论和关注。
Web 组件化是一种将Web应用的UI部分拆分成可复用的独立组件的架构方法。这种方法有助于提高代码的可维护性、可重用性和可测试性。
而Web Components 标准则提供了一套原生的API，允许开发者创建可复用的自定义元素，这些元素封装了HTML、CSS和JavaScript，并且可以在任何现代浏览器中作为标准的HTML元素来使用。
Web Components 标准主要包括以下几个部分：
- Custom Elements（自定义元素）：允许开发者定义自己的HTML元素。
- Shadow DOM（影子DOM）：为元素提供了一个封装的DOM和样式作用域，使得元素内部的样式和行为不会影响到外部，反之亦然。
- HTML Templates（HTML模板）：
<template>标签允许开发者定义一段不会立即渲染的HTML内容，可以稍后通过JavaScript来实例化并插入到文档中。 - Slots（插槽）：虽然不是Web Components标准的一部分，但经常与Shadow DOM一起使用，用于在父组件中指定子组件内容插入的位置。
下面通过3个示例，对 Web Components 的用法进行展示。
示例1：Hello World 组件
以下是一个简单的Web组件示例，它创建了一个自定义的
<hello-world>
元素，该元素在屏幕上显示“Hello, World!”：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Web Components Example</title></head><body><hello-world></hello-world><script>// 自定义元素类classHelloWorldextendsHTMLElement{constructor(){super()// 创建一个影子DOMconst shadow =this.attachShadow({mode:'open'})// 定义并插入HTML模板
shadow.innerHTML =`
<style>
p { color: blue; }
</style>
<p>Hello, World!</p>
`}}// 注册自定义元素
customElements.define('hello-world', HelloWorld)</script></body></html>
在这个例子中，我们首先定义了一个名为
HelloWorld
的类，它继承自
HTMLElement
。在
constructor
方法中，我们调用
super()
来调用父类的构造函数，并创建了一个影子DOM。然后，我们通过设置
shadow.innerHTML
来定义元素的内部结构和样式。最后，我们使用
customElements.define
方法来注册这个自定义元素，使其可以在HTML文档中使用。
在HTML文档中，我们通过
<hello-world></hello-world>
标签来使用这个自定义元素。当浏览器解析到这个标签时，它会创建一个
HelloWorld
类的实例，并将其插入到DOM中。由于我们使用了影子DOM，所以
<hello-world>
元素内部的样式和结构不会影响到外部的其他元素，也不会被外部样式所影响。
审查元素看下自定义元素长什么样：
示例2: 简单的计数器组件
以下示例创建了一个自定义元素，它显示一个计数器，用户可以通过点击按钮来增加计数。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Counter Web Component</title></head><body><counter-element></counter-element><script>classCounterElementextendsHTMLElement{constructor(){super();this.count =0;// 创建影子DOM const shadow =this.attachShadow({mode:'open'});// 样式
shadow.innerHTML =`
<style>
button { margin: 5px; }
</style>
<p>Count: <span>${this.count}</span></p>
<button οnclick="this.parentNode.host.increment()">Increment</button>
`;// 获取元素引用 this.countDisplay = shadow.querySelector('span');}increment(){this.count++;this.countDisplay.textContent =this.count;}// 静态getter，允许外部访问increment方法 staticgetobservedAttributes(){return[];// 本例不观察属性变化 }connectedCallback(){// 元素被添加到DOM时执行 // 可以在这里添加事件监听器等 }disconnectedCallback(){// 元素从DOM中移除时执行 // 可以在这里移除事件监听器等 }}// 注册自定义元素
customElements.define('counter-element', CounterElement);</script></body></html>
注意：在上面的示例中，我直接在按钮的
onclick
属性中使用了
this.parentNode.host.increment()
，这虽然可以工作，但通常不是最佳实践。更好的做法是使用
addEventListener
来添加事件监听器，并在回调函数中调用
increment
方法。然而，为了保持示例的简洁性，我选择了这种方式。
示例3：插槽（Slots）
下面的示例创建了一个
<custom-card>
元素，它使用
slot
元素来允许用户插入自定义内容。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Custom Card Web Component</title><style>/* 全局样式，不会影响组件样式 */.card-content{padding: 10px;border: 1px solid red;border-radius: 5px;}</style></head><body><custom-card><h2slot="header">Card Title</h2><p>This is the content of the card.</p></custom-card><script>classCustomCardextendsHTMLElement{constructor(){super()// 创建影子DOMconst shadow =this.attachShadow({mode:'open'})// 样式和HTML结构
shadow.innerHTML =`
<style>
:host {
display: block;
margin: 20px;
}
.header {
background-color: #f0f0f0;
padding: 5px;
text-align: center;
}
.card-content {
padding: 20px;
}
</style>
<div class="header">
<slot name="header"></slot>
</div>
<div class="card-content">
<slot></slot>
</div>
`}}// 注册自定义元素
customElements.define('custom-card', CustomCard)</script></body></html>
在这个示例中，
<custom-card>
元素包含了一个带有
header
插槽的头部和一个默认的插槽用于内容。在HTML中，我们通过指定
slot
属性来将内容分配到相应的插槽中。
好了，分享结束，谢谢点赞，下期再见。
版权归原作者 沐爸muba 所有， 如有侵权，请联系我们删除。