Ionic 4中的阴影DOM / Web组件样式

Question

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

如果您检查按钮：

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

那么：host样式在哪里定义以及如何/在哪里注入DOM？

Answer 1

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

通常，当我想阅读类似内容时，将其复制到编辑器中并在其中查看：

您可以看到所有样式都在此处定义。 Stenciljs还加载一些常规样式，以确保一切看起来正确。这些实例化到您的头部：

Answer 2

所以我认为Ionic 4正在使用：https://developers.google.com/web/updates/2019/02/constructable-stylesheets

这就是为什么样式在DOM中不直接可见的原因。感谢Fraser解决这个问题。