Web components
原创Web components
原创
Web components是一组Web平台API和用于创建和使用可重复使用的自定义HTML元素的规范，旨在帮助我们封装和打包其UI元素和功能，从而更容易构建模块化、可维护和可重用的Web应用程序组件。
开始使用Web components
- 自定义元素： 允许我们定义具有自定义行为的自己的HTML元素。这些元素可以封装特定组件所需的标记和JavaScript逻辑。
- Shadow DOM： 为Web components的样式和标记提供封装。它允许创建具有自己的作用域CSS的独立DOM子树，防止样式泄漏和干扰页面的其余部分。
- HTML模板： 是一种定义可在需要时在DOM中实例化的可重复使用标记块的方法。它们通常在自定义元素中使用，用于定义组件的结构。
自定义元素：
自定义元素定义： 我们可以通过创建一个继承HTMLElement基类或其派生类的类来定义自己的自定义元素。该类代表自定义元素并定义其行为和属性。
class MyCustomElement extends HTMLElement {
constructor() {
super();
// 在这里初始化我们的自定义元素
}
}自定义元素注册： 在定义自定义元素类之后，需要使用customElements.define方法在浏览器中注册它。这将自定义元素的标签名称与其JavaScript类关联起来。
customElements.define('my-custom-element', MyCustomElement);现在，我们可以在HTML中使用<my-custom-element></my-custom-element>，它将与我们的MyCustomElement类关联起来。
生命周期回调： 自定义元素提供生命周期回调，允许我们在元素生命周期的各个阶段定义行为。一些常见的生命周期回调包括：
constructor()：在创建自定义元素实例时调用。connectedCallback()：在自定义元素插入DOM时调用。disconnectedCallback()：在自定义元素从DOM中移除时调用。attributeChangedCallback()：在元素的指定属性发生变化时触发。
我们可以使用这些回调来设置初始状态、附加事件监听器以及在必要时执行清理。
Shadow DOM：
Shadow DOM（影子DOM） 是Web平台的一个功能，允许对Web components的HTML、CSS和JavaScript的一部分进行封装。它使我们能够在HTML文档内创建隔离且独立的DOM树。Shadow DOM对于构建模块化和可重用的Web components非常有用，确保其内部结构和样式不会干扰页面的其余部分。
Shadow DOM的关键特征包括：
- 封装： Shadow DOM封装了Web components的标记、样式和行为，防止它们影响或受到全局页面的DOM和CSS的影响。这种隔离有助于避免命名冲突和意外的样式交互。
- 作用域样式： 在Shadow DOM中定义的样式仅作用于该Shadow DOM子树内的元素。它们不会泄漏到文档的其他部分，也不会受全局页面样式的影响。这种作用域样式有助于维护组件的完整性。
- 组合： Shadow DOM可用于从更小、封装的部分组合复杂的Web components。这些部分可以在不同的组件和项目中重复使用，促进了模块化和可维护性。
- JavaScript封装： 除了封装标记和样式，Shadow DOM还封装了JavaScript。在Shadow DOM内运行的JavaScript代码与外部代码隔离，防止潜在的冲突，确保组件的完整性。
以下是在自定义元素中创建Shadow DOM的示例：
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<style>
/* Shadow DOM的作用域样式 */
:host {
color: blue;
}
</style>
<p>这个内容在Shadow DOM内。</p>
`;
}
}
customElements.define('my-custom-element', MyCustomElement);在上面的示例中，使用了attachShadow方法和mode: 'closed'，这会将Shadow DOM从MyCustomElement之外的JavaScript中隐藏。Shadow DOM仍然封装了标记和样式，但无法从外部JavaScript中访问或操作。
HTML模板和插槽：
- HTML模板 利用
<template>元素定义了可重复使用的标记结构，最初被隐藏和不活动，等待在DOM中进行动态插入，以促进可重用性。 - 插槽（Slots）： 插槽允许将内容从父文档投影到自定义元素内的命名插槽中。在父文档中使用自定义元素时，可以为这些插槽提供内容。
要使用HTML模板和插槽创建具有自定义元素的Web components，我们可以使用<template>元素和<slot>元素。以下是如何修改我们的MyCustomElement类以使用模板和插槽的示例：
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'closed' });
// 创建一个模板元素
const template = document.createElement('template');
template.innerHTML = `
<style>
/* Shadow DOM的作用
域样式 */
:host {
color: blue;
}
</style>
<p>这个内容在Shadow DOM内。</p>
<slot></slot> <!-- 为内容定义一个插槽 -->
`;
const clone = document.importNode(template.content, true);
shadow.appendChild(clone);
}
}
customElements.define('my-custom-element', MyCustomElement);通过此代码，我们创建了一个包含组件结构的<template>元素，其中包括用于内容的<slot>元素。在HTML中使用自定义元素时，<my-custom-element>标签内的内容将替换Shadow DOM中的<slot>元素的内容。
以下是如何在HTML中使用我们的自定义元素的示例：
<my-custom-element>
<p>通过插槽插入的内容。</p>
</my-custom-element>在这个例子中，<my-custom-element>标签内的内容将替换Shadow DOM中的<slot>元素的内容。
Web components演示：
我们可以在这里找到一个Web components的实际示例。
可能你会问，为什么大家都不经常使用Web components呢？
- 复杂性： 与使用流行的前端框架相比，Web components可能更冗长，需要对Web平台有更深入的了解。一些我们认为Web components的设置和使用更为复杂，尤其是在基本功能如数据绑定和状态管理不容易获得的情况下。
- 有限的工具和生态系统： 流行的前端框架如React和Vue具有丰富的生态系统，拥有大量的库、工具和资源。作为较低级别技术的Web components没有如此成熟或广泛的生态系统，这可能使开发变得更具挑战性。
- 对未知技术的不愿采用： 从React、Angular、Vue或Svelte转向Web components可能会具有挑战性，因为缺乏广泛的案例研究或使用Web components的知名产品。尽管越来越多的公司现在正在采用Web components来满足其需求，但仍然需要高质量的案例研究和信息性博文来促进这种转变。 我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。