Custom Elements 是 Web 组件的一部分，允许开发者通过创建新的 HTML 标签来扩展现有的元素和功能，从而实现自定义的复杂组件。在 Custom Elements 中，有许多选项可以用来定制组件的行为，其中 Shadow DOM 和继承是两个常见的选项。本文将详细介绍这两个选项，包括它们的含义、用处、用法以及示例代码。
Shadow DOM
Shadow DOM 是一种 Web 标准，用于创建封装和隔离的 DOM 子树，并在组件中使用它。通过 Shadow DOM，我们可以将组件的 CSS 样式和 HTML 结构封装在一起，与页面其他元素隔离开来，从而避免 CSS 样式的污染和 HTML 结构的意外修改。这样做的好处是，可以保证组件的稳定性和可重用性。
使用 Shadow DOM 的方法很简单，只需要在 Custom Elements 的定义中设置 shadowRoot 属性即可：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- ------ - ------ -------
----- ------ - ---------------------------------
---------------------------- -------------
-- --- ------ -- ------ ---
---------------------------
-- --- --- ------ -- ------ ---
----- ----- - --------------------------------
----------------- - -
---------- -
----------------- -----
------- -----
------ ------
------- --------
-------- ---- -----
-
--
--------------------------
-
-
---------------------------------- ----------在上面的示例中，我们使用 attachShadow 方法创建了一个 Shadow DOM，然后将一个 button 元素和对应的 CSS 样式添加到 Shadow DOM 中。最后，我们将定义好的 MyButton 组件注册为一个自定义标签，这样就可以在页面中使用它了：
<my-button>Click me!</my-button>
在上面的代码中，<my-button> 就是我们定义的自定义标签，它会自动渲染出一个按钮，同时也会应用 Shadow DOM 中定义的 CSS 样式。
继承
继承是另一个常用的 Custom Elements 选项，用于扩展现有的 HTML 元素，从而实现自定义的复杂组件。通过继承，我们可以重载元素的默认行为，添加新的属性和方法，或者修改元素的样式和内容。
使用继承也很简单，只需要在 Custom Elements 的定义中继承原始元素即可：
-- -------------------- ---- -------
----- ------- ------- ---------------- -
------------- -
--------
------------------------------ -- -- -
---------- - -------------------------
---
-
-
--------------------------------- -------- - -------- ------- ---在上面的示例中，我们定义了一个 MyInput 组件，继承自原始的 HTMLInputElement 元素。在构造函数中，我们监听了 input 事件，并在回调函数中将输入内容转换为大写字母。最后，我们将 MyInput 组件注册为一个扩展自 <input> 标签的自定义标签，这样就可以在页面中使用它了：
<label> Name: <input is="my-input" type="text" name="name" /> </label>
在上面的代码中，我们将 <input> 标签的 is 属性设置为 my-input，这样就可以将其转换为 MyInput 组件，并自动应用继承的行为和样式。
总结
在本文中，我们介绍了 Custom Elements 的两个常见选项，包括 Shadow DOM 和继承。通过使用这些选项，我们可以轻松地创建自定义的复杂组件，实现更高效、更稳定的 Web 开发体验。如果你想更深入地学习 Custom Elements 的使用，可以尝试更复杂的示例和应用场景，同时也可以参考 Web Components 规范和实验性的浏览器 API 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d4245968c7c53b0bfe489