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 标签就是一个很好的例子。

使用步骤

  1. 定义一个影子宿主,如果是自定义组件则用-隔开如<g-button><g-input>,防止与html标签重名
  2. 宿主内部创建一个 (影子根)shadow root 作为 shadow tree 的根节点
  3. 根节点的内容 createShadowRoot().appendChild(clone)
document.querySelector('host-dom') //1.定义一个影子宿主
.createShadowRoot()				   //2.宿主内部创建一个根节点
.innerHTML = '<p">我是影子根的内容</p>'//3.根节点的内容

examples

// 影子宿主(shadow host)
var shadowHost = document.querySelector('.shadowhost');
// 创建影子根(shadow root)
var shadowRoot = shadowHost.createShadowRoot();
// 影子根作为影子树的第一个节点,其他的节点比如p节点都是它的子节点。
shadowRoot.innerHTML = '<p">我是影子根标签的内容</p>';    

宿主样式:host

:host{xxx} 	/*当前宿主*/
:host(.different) /*仅当宿主元素是 .different 的后代元素时*/