本文将深入探讨 web components 中 shadow dom 的样式隔离与布局原理。我们将解析 shadow dom 内部元素的样式定义方式，以及外部样式与可继承属性如何影响 shadow host 及其内容。同时，文章还将阐明 shadow dom 内部元素（如 `h1`）的默认布局行为，并提供使用 `` 构建 shadow dom 的最佳实践，帮助开发者更好地掌握自定义元素的样式控制。
Shadow DOM 的样式隔离与内部样式定义
Shadow DOM 是 Web Components 的核心特性之一，它提供了一个封装的 DOM 子树，与主文档 DOM 相互隔离。这种隔离不仅限于结构，更重要的是体现在样式上。默认情况下，外部 CSS 规则不会穿透 Shadow DOM 的边界，反之亦然。这意味着在 Shadow DOM 内部定义的样式仅作用于其内部元素，从而避免了全局样式污染，实现了组件的真正封装。
要在 Shadow DOM 内部定义样式，最直接且推荐的方式是在 Shadow Root 中嵌入 <style> 标签。这些样式规则将仅应用于 Shadow DOM 内部的元素。
示例代码：
class CustomTagA extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
// 在 Shadow DOM 内部定义样式
const style = document.createElement('style');
style.textContent = `
.wrapper {
color: blue;
font-family: sans-serif;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
}
h1 {
margin: 0; /* 移除 h1 的默认外边距 */
color: darkgreen;
}
`;
shadow.appendChild(style);
const wrapper = document.createElement('h1');
wrapper.setAttribute('class', 'wrapper');
wrapper.textContent = '自定义标签 A';
shadow.appendChild(wrapper);
}
}
customElements.define('cutomtag-a', CustomTagA);在上述示例中，h1 和 .wrapper 的样式完全在 Shadow DOM 内部定义，不会影响到主文档中的其他 h1 或 wrapper 类元素。
Shadow Host 元素的样式与外部影响
虽然 Shadow DOM 内部的样式是隔离的，但 Shadow Host 元素本身（即自定义标签，例如 <cutomtag-a>）仍然是主文档 DOM 的一部分。因此，主文档中的 CSS 规则可以作用于 Shadow Host 元素。
例如，你可以为 <cutomtag-a> 设置 display、margin、padding、border 等属性：
/* 在主文档的 <style> 标签中 */
cutomtag-a {
display: block; /* 将自定义标签本身设置为块级元素 */
margin-bottom: 20px;
border: 1px solid purple;
}需要注意的是，这些外部样式只能影响 Shadow Host 元素的外部表现，而不能穿透到 Shadow DOM 内部去修改其内容元素的样式。
可继承 CSS 属性的特殊行为：
一些 CSS 属性（如 color、font-family、font-size、line-height 等）是可继承的。当这些属性作用于 Shadow Host 元素时，它们会穿透 Shadow DOM 的边界，并被 Shadow DOM 内部的元素继承，除非 Shadow DOM 内部的样式明确覆盖了这些继承值。
示例：
<style>
body {
font-family: 'Arial', sans-serif;
color: #333; /* 可继承属性 */
}
cutomtag-a {
font-size: 1.2em; /* 可继承属性 */
}
</style>
<body>
<cutomtag-a></cutomtag-a>
</body>在上面的例子中，如果 <cutomtag-a> 的 Shadow DOM 内部没有明确设置 font-family、color 或 font-size，那么其内部元素将继承 body 和 <cutomtag-a> 上定义的相应属性值。
内部元素布局对自定义标签的影响
关于自定义标签的布局行为，例如为什么 cutomtag-a 会导致换行，这主要取决于其 Shadow DOM 内部包含的元素的默认显示类型。
在提供的初始代码中，CustomTagA 的 Shadow DOM 内部创建了一个 <h1> 元素：
const wrapper = document.createElement('h1');
wrapper.setAttribute('class', 'wrapper');
wrapper.textContent = 'Custom Tag A';
shadow.appendChild(wrapper);<h1> 标签在 HTML 中默认是一个块级元素（display: block）。块级元素会独占一行，并从新行开始显示。因此，即使自定义标签 <cutomtag-a> 本身默认可能表现为 display: inline 或 display: inline-block（取决于浏览器和自定义元素内部是否有内容使其具有尺寸），但其 Shadow DOM 内部的 <h1> 元素会强制其自身内容独占一行，从而导致视觉上的换行效果。
工作原理总结：
- 自定义元素自身显示类型：自定义元素 <cutomtag-a> 默认的 display 属性通常是 inline。你可以通过外部 CSS 显式地将其设置为 display: block 或 display: inline-block。
- Shadow DOM 内部元素显示类型：Shadow DOM 内部的元素（如 h1, p, div 等）会遵循其自身的 HTML 默认显示类型。h1 是块级元素，会占据整行。
- 视觉效果：当一个 inline 或 inline-block 的自定义元素内部包含一个 block 级元素时，该块级元素会撑开自定义元素的内部空间，并因其块级特性而导致换行。
如何控制：
-
控制自定义标签的整体布局：通过在主文档 CSS 中为自定义标签设置 display 属性。
cutomtag-a { display: inline-block; /* 让自定义标签表现为行内块 */ width: 200px; height: 50px; vertical-align: top; } -
控制 Shadow DOM 内部元素的布局：在 Shadow DOM 内部的 <style> 中修改内部元素的 display 属性。
// 在 Shadow DOM 内部 style.textContent = ` h1 { display: inline-block; /* 将 h1 变为行内块 */ margin: 0; } `;通过这种方式，你可以让 h1 不再独占一行，从而影响整个自定义元素的布局。
