自定义组件
# Web components
Web Components是一套不同的技术，允许您创建可重用的定制元素
# Custom elements
Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
HTML templates（HTML模板）：<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
# HTML Imports
HTML Imports（HTML导入）：一旦定义了自定义组件，最简单的重用它的方法就是使其定义细节保存在一个单独的文件中，然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制，尽管存在争议 — Mozilla 根本不同意这种方法，并打算在将来实现更合适的。
# shadow DOM
Shadow DOM接口是Web components关键所在，它可以将一个隐藏的、独立的DOM添加到一个元素上，video 标签就是一个很好的例子。
# 使用步骤
- 定义一个影子宿主，如果是自定义组件则用-隔开如
<g-button>或<g-input>,防止与html标签重名 - 宿主内部创建一个 (影子根)shadow root 作为 shadow tree 的根节点
- 根节点的内容 createShadowRoot().appendChild(clone)
document.querySelector('host-dom') //1.定义一个影子宿主
.createShadowRoot() //2.宿主内部创建一个根节点
.innerHTML = '<p">我是影子根的内容</p>'//3.根节点的内容
1
2
3
2
3
# examples
// 影子宿主（shadow host）
var shadowHost = document.querySelector('.shadowhost');
// 创建影子根（shadow root）
var shadowRoot = shadowHost.createShadowRoot();
// 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
shadowRoot.innerHTML = '<p">我是影子根标签的内容</p>';
1
2
3
4
5
6
2
3
4
5
6
# 宿主样式:host
:host{xxx} /*当前宿主*/
:host(.different) /*仅当宿主元素是 .different 的后代元素时*/
1
2
2
编辑 (opens new window)
上次更新: 2022/05/30, 17:42:07