一種代碼封裝技術(shù)庆猫。微軟于21年發(fā)布了基于此的UI框架Fast。
因為是原生API赠幕，性能方面要優(yōu)于三大框架退盯，virtual dom性能也不及shadow dom。不過寫法略原始铐殃。

定義component

customElements.define(compName, class extends HTMLElement {
  constructor() {
    super();
    ...
  }
})

組件內(nèi)容

shadow DOM

Web components 的一個重要屬性是封裝——可以將標記結(jié)構(gòu)、樣式和行為隱藏起來跨新，并與頁面上的其他代碼相隔離富腊，保證不同的部分不會混在一起，可使代碼更加干凈玻蝌、整潔。其中词疼，Shadow DOM 接口是關(guān)鍵所在俯树，它可以將一個隱藏的、獨立的 DOM 附加到一個元素上贰盗。

語法：

var shadow = this.attachShadow({ mode: 'closed' });
content...
shadow.appendChild(content);

mode表示該shadow DOM是否對外開放许饿，開放則外部document能通過.shadowRoot的方式獲取某個DOM下的shadow DOM，shadowRoot獲取的是內(nèi)部的document舵盈。開放的mode為'open'陋率。

template

如果想要在組件內(nèi)寫具體的元素球化，正常寫法就是原生的創(chuàng)建元素，填充內(nèi)容瓦糟，加進文檔筒愚。沒有jQuery甚至不想寫這些。
有兩種方法可以減少代碼量菩浙，一是template巢掺。

<template id="id">
  <div>...</div>
</template>
// component constructor
var content = document.getElementById('id').content.cloneNode(true);

這樣就可以用html寫結(jié)構(gòu)，content就是template的文檔段劲蜻，不過數(shù)據(jù)填充還得js寫陆淀。

slot

用過Vue的應(yīng)該對這個東西很熟悉，功能和具名插槽基本一致先嬉。

<template>
  <style>
    .slot1 {
      color: salmon;
    }
    .slot2 {
      color: seagreen;
    }
  </style>
  <p class="slot1">
    <slot name="slot1"></slot>
  </p>
  <p class="slot2">
    <slot name="slot2"></slot>
  </p>
</template>

插槽聲明在template中轧苫，嵌在特定的HTML結(jié)構(gòu)中，插入不同的數(shù)據(jù)疫蔓，功能上和組件很像含懊，但是沒有生命周期，只有數(shù)據(jù)鳄袍，所以可以看做是微型組件绢要。
這里在p.slot1中聲明了名為slot1的插槽，p.slot2中聲明了名為slot2的插槽拗小。

<component>
  <span slot="slot1">slot1</span>
  <span slot="slot2">slot2</span>
</component>

使用插槽需要在標簽中加上slot屬性重罪，值為slot名。
插槽的實際表現(xiàn)與使用slot屬性的標簽以及slot本身的樣式有關(guān)哀九，而且貌似會疊加樣式剿配。
對照組如下：

<template>
  <h2 class="slot1">
    <slot name="slot1"></slot>
  </h2>
  <p class="slot2">
    <slot name="slot2"></slot>
  </p>
</template>

<component>
  <h1 slot="slot1">slot1</h1>
  <h1 slot="slot2">slot2</h1>
</component>
<component>
  <span slot="slot1">slot1</span>
  <span slot="slot2">slot2</span>
</component>

表現(xiàn)如下：

test

可以看出來，字體大小 h1>slot-h2 > h1>slot-p > span>slot-h2 > span>slot-p阅束。
具體什么疊加策略也看不出來呼胚，computed style里分別是 48 32 24 16 px。
感覺使用的時候外層還是不要隨意加樣式息裸，保持slot內(nèi)部樣式統(tǒng)一好點蝇更。

參考：
https://www.cnblogs.com/Andy1982/p/16222577.html
http://www.ruanyifeng.com/blog/2019/08/web_components.html?ivk_sa=1024320u