Sekyoro的博客小屋
·
现代化的浏览器可重用元素:web component
💡
原文中文，约9800字，阅读约需24分钟。
📝
内容提要
Web Components 是一组标准，用于创建独立的自定义 HTML 元素，包括自定义元素、影子 DOM 和 HTML 模板。自定义元素通过 JavaScript API 定义，影子 DOM 提供封装的 DOM 树，避免与主文档冲突。HTML 模板支持可重用的标记。自定义元素分为独立和内置两种，影子 DOM 样式可编程或声明定义，模板和插槽提供灵活的内容插入。
🎯
关键要点
- Web Components 是一组标准，用于创建独立的自定义 HTML 元素。
- Web Components 包含自定义元素、影子 DOM 和 HTML 模板三项主要技术。
- 自定义元素通过 JavaScript API 定义，可以在用户界面中重用。
- 影子 DOM 提供封装的 DOM 树，避免与主文档冲突。
- HTML 模板支持可重用的标记，可以多次使用。
- 自定义元素分为独立自定义元素和自定义内置元素。
- 使用 CustomElementRegistry.define() 方法注册自定义元素。
- 自定义元素可以响应属性变化，需实现 observedAttributes 和 attributeChangedCallback。
- 影子 DOM 允许将隐藏的 DOM 树附加到常规 DOM 树中，提供样式封装。
- 可以通过编程或声明式方式为影子 DOM 树添加样式。
- 模板和插槽提供灵活的内容插入，允许在每个元素实例中显示不同的文本。
- 插槽通过 name 属性标识，允许在模板中定义占位符。
➡️
