Web Component

一种代码封装技术。微软于21年发布了基于此的UI框架Fast。
因为是原生API，性能方面要优于三大框架，virtual dom性能也不及shadow dom。不过写法略原始。

定义component

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

组件内容

shadow DOM

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

语法：

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

mode表示该shadow DOM是否对外开放，开放则外部document能通过.shadowRoot的方式获取某个DOM下的shadow DOM，shadowRoot获取的是内部的document。开放的mode为'open'。

template

如果想要在组件内写具体的元素，正常写法就是原生的创建元素，填充内容，加进文档。没有jQuery甚至不想写这些。
有两种方法可以减少代码量，一是template。

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

这样就可以用html写结构，content就是template的文档段，不过数据填充还得js写。

slot

用过Vue的应该对这个东西很熟悉，功能和具名插槽基本一致。

<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结构中，插入不同的数据，功能上和组件很像，但是没有生命周期，只有数据，所以可以看做是微型组件。
这里在p.slot1中声明了名为slot1的插槽，p.slot2中声明了名为slot2的插槽。

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

使用插槽需要在标签中加上slot属性，值为slot名。
插槽的实际表现与使用slot属性的标签以及slot本身的样式有关，而且貌似会叠加样式。
对照组如下：

<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>

表现如下：

test

可以看出来，字体大小 h1>slot-h2 > h1>slot-p > span>slot-h2 > span>slot-p。
具体什么叠加策略也看不出来，computed style里分别是 48 32 24 16 px。
感觉使用的时候外层还是不要随意加样式，保持slot内部样式统一好点。

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