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

我试图理解ionic 4是如何以及在何处将web组件的样式注入dom的。我不想通过CSS变量更改它，但我希望能够检查组件并查看样式来自何处。例如

如果您检查按钮：

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

---

那么：主机样式是在哪里定义的，它是如何/在哪里注入DOM的呢？

据我所知，应用于组件的所有样式通常都是在HTML中设置的。您已经找到了样式标记，它是该组件之后的第一个标记。这是超级完整的样式，这就是为什么你通常只看到一个片段。这取决于浏览器，但要查看所有样式，可能必须双击样式标记之间的样式

通常，当我想阅读类似的内容时，我会将其复制到我的编辑器中，然后在那里查看：

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

---

所以我认为离子4使用的是：

---

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

嗨，克里斯蒂安，这正是我希望看到的东西，但当我查看页面时：转到Chrome/Brave中的按钮，我看不到样式标签。如果我试图选择它（看看是否有），我会得到空文档。querySelector（'body>ion app>ion content>ion button'）。shadowRoot。querySelector（'style'）空是来自同一页面的屏幕截图吗？因为我看不到相同的。是的，这个截图来自你的页面，但我使用的是最新的Firefox。我刚试过Chrome，但也看不到样式标签。-因为我不使用Chrome，我不能说这是否是正常行为，但我不这么认为。。。看起来像是Chrome中的一个bug，因为样式是渲染的，但没有设置内联样式。我不认为这是Chrome中的bug。因为其他非离子web组件显示样式。有趣的是，Safari显示的和Firefox相同。样式标签和其他所有内容都是在JavaScript中动态生成的。在这种特定情况下，Chrome可能在这个过程中遇到了一些问题。您可以尝试在tsx文件的@component decorator中使用“scoped:true”而不是“shadow:true”来检查发生的情况。但我建议你提出一个新问题，比如“为什么chrome不显示动态生成的样式标签”，因为firefox和safari清楚地显示了这一点。也许一些Chrome专业人士能回答这个问题。