javascript - Ionic 4 中的 Shadow DOM/Web 组件样式

Question

我试图了解 ionic 4 如何以及在何处将 Web 组件的样式注入(inject)到 dom 中。我对通过 CSS 变量更改它不感兴趣，但我希望能够检查组件并查看样式的来源。例如https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios

如果您检查按钮:

我可以看到正在应用的样式，但我看不到所有样式的来源，它不在 css 包中，不在页面上的样式标签中，或直接在元素上或应用于影子根。通常，主机样式是组件的一部分，例如

那么 :host 样式在哪里定义以及它如何/在哪里注入(inject)到 DOM 中？

Answer 1

据我所知，应用于组件的所有样式通常都设置为innerHTML。您已经找到了样式标签，它是组件之后的第一个标签。一如既往，它充满了样式，这就是为什么您通常只看到一个片段。这取决于浏览器，但要查看所有样式，您可能必须双击样式标签之间的样式。

通常当我想阅读这样的内容时，我会将其复制到编辑器中并在那里查看:

如您所见，所有样式都在那里定义。 Stenciljs 还加载一些通用样式以确保一切看起来都正确。这些被实例化到您的 head 部分: