起因是在使用 Ionic 的过程中，总是会碰到 slot 的用法，以及针对 shadow dom 特殊的样式修改语法，简单了解一下基础概念。
自定义组件
自定义元素生命周期
- connectedCallback 每当元素添加到文档中时调用
- disconnectedCallback 每当元素从文档中移除时调用
- adoptedCallback 每当元素被移动到新文档中时调用
- attributeChangedCallback 在列在元素的 observedAttributes 属性中的属性被添加、修改、移除或替换时调用。
要使自定义元素在页面中可用，需要调用 window.customElements 的 define 方法进行注册
使用自定义元素
- 要使用自定义内置元素，请使用内置元素，但将自定义名称作为 is 属性的值
- 要使用独立自定义元素，就像使用内置的 HTML 元素一样，使用自定义名称即可
影子 DOM（Shadow DOM）允许你将一个 DOM 树附加到一个元素上，并且使该树的内部对于在页面中运行的 JavaScript 和 CSS 是隐藏的。
在影子 DOM 向 web 开发者提供之前，浏览器已经使用它来封装元素的内部结构。以 <video> 元素举例，它暴露了默认浏览器控件。在 DOM 中你只能看到 <video> 元素，但其影子 DOM 中包含了一系列按钮和其它控件。影子 DOM 规范使你能够操纵自定义元素的影子 DOM。
样式定义
在影子 DOM 中应用样式
- 编程式：通过创建一个 CSSStyleSheet 对象并将其附加到影子根
- 声明式：通过在一个 template 的元素的声明中添加一个 style 元素
Why Shadow Parts
- Ionic 采用的 Web Components 构建组件，Web 组件遵循阴影 DOM 规范，以封装样式和标记
- Shadow DOM 对于防止样式从组件中泄漏出来并无意中应用到其他元素非常有用。但由于这种封装，样式也不能渗透到 Shadow 组件的内部元素中
- Shadow Parts 允许开发者在 shadow tree 外部给 shadow tree 内部设置样式，为了做到这一点，必须公开部件
- 公开部件只需要通过给内部元素设置 part 属性即可，外部设置样式时使用可以使用 ::part 伪类选择公开的元素
- CSS Shadow Parts 对兼容性有一定的要求，同时某些情况可能并不支持
template and slot
关于 template 模板：方便在网页上复用相同的标记结构，此元素及其内容不会在 DOM 中渲染，但仍可使用 JavaScript 引用它。
关于 slot 元素：通过声明式的语法在每个元素实例中显示不同的节点，插槽由其 name 属性标识，并且允许你在模板中定义占位符，当在标记中使用该元素时，该占位符可以填充所需的任何 HTML 标记片段。未命名的 slot 元素将填充自定义元素中所有不含 slot 属性的顶级子节点。也包括文本节点。