Component API 是一种用于创建可重复使用的自定义 HTML 元素的技术。 它由三个基本部分组成: Custom Elements、Shadow DOM 和 HTML Templates。
Custom Elements 允许您创建具有自定义标记名称的新 HTML 元素,这些元素可以封装复杂的行为和样式。 通过调用 customElements.define()
方法并传递一个标记名称和自定义元素类来注册新的自定义元素。
Shadow DOM 提供了一种将应用程序内的 DOM 树隔离开的方式,从而防止外部 CSS 或 JavaScript 干扰它。 Shadow DOM 的内容由使用 element.attachShadow()
方法创建的影子根节点管理。
HTML Templates 允许您定义可注入其他文档和脚本的 HTML 片段,而无需实际呈现它们。 您可以在 JavaScript 中选择模板,并在需要时将其插入到文档中。
要使用 Web Component API 创建自定义元素,请遵循以下步骤:
customElements.define()
方法注册自定义元素并设置其标记名称。请注意,虽然 Web Component API 可以让您创建强大的自定义元素,但是它不覆盖浏览器本身定义的 HTML 元素的语义。 为避免与现有元素发生冲突,请尽量遵循 HTML 规范并使用自定义标记名称。