Shadow Element技术疑问：Shadow Host默认样式与换行问题

问题1：Shadow Host Element的默认CSS位于何处？ #

自定义元素（即Shadow Host）的默认样式来自浏览器的用户代理样式表。所有未手动设置样式的HTML元素，包括自定义元素，都会应用浏览器内置的这套默认规则。比如自定义元素默认会被设置为display: inline;，你可以在浏览器开发者工具的「Styles」面板中展开「User Agent Stylesheet」部分，找到对应的默认CSS规则。

问题2：为何cutomtag-a会换行，尽管它是内联显示？是否因为使用了h1标签？其工作原理是什么？哪里可以找到相关文档？ #

是的，换行的核心原因就是cutomtag-a的Shadow DOM内部使用了h1标签。

工作原理：Shadow DOM内部的元素遵循自身的CSS盒模型规则，h1是块级元素（默认display: block;），它会独占一行并占据父容器的全部宽度。虽然自定义元素本身是内联元素，但内部的块级元素会迫使外部的自定义元素容器表现出块级元素的特性——浏览器会自动为块级元素前后添加换行，导致整个cutomtag-a看起来像块级元素一样换行显示。

关于这类规则的详细说明，可以查看MDN中自定义元素和Shadow DOM的相关文档内容。

附上相关代码： #

main.js

class CustomTagA extends HTMLElement {
      constructor() {
        super();

        const shadow = this.attachShadow({mode: 'open'});
        const wrapper = document.createElement('h1');
        wrapper.setAttribute('class', 'wrapper');
        wrapper.textContent = 'Custom Tag A';
        shadow.appendChild(wrapper);
      }
}

class CustomTagB extends HTMLElement {
  constructor() {
       super();

    const shadow = this.attachShadow({mode: 'open'});

    const wrapper = document.createElement('a');
    wrapper.setAttribute('class', 'wrapper');
    wrapper.textContent = 'Custom Tag B';
     shadow.appendChild(wrapper);
  }
}

customElements.define('cutomtag-a', CustomTagA);
customElements.define('cutomtag-b', CustomTagB);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <cutomtag-a></cutomtag-a>
      <cutomtag-b></cutomtag-b>
      <script src="./main.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者MinhSu - Justin