Ionic 4中的阴影DOM/Web组件样式
我正在尝试理解ionic 4是如何以及在哪里将web组件的样式注入到dom中的。我对通过CSS变量更改它不感兴趣，但我希望能够检查组件并查看样式来自何处。例如，在https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios上
如果您检查该按钮：
我可以看到style被应用了，但我看不到所有的样式都是从哪里来的，它不在css包中，不在页面上的样式标签上，也不直接在元素上，也不能应用到阴影根上。通常，主体样式是组件的一部分，例如
那么:host样式是在哪里定义的，它是如何/在哪里注入到DOM中的呢？
回答 2
Stack Overflow用户
发布于 2019-11-07 23:30:01
据我所知，您应用于组件的所有样式通常都设置为innerHTML。您已经找到了样式标记，它是组件之后的第一个标记。像往常一样，它的样式非常丰富，这就是为什么你通常只看到一个代码片段。这取决于浏览器，但要查看所有样式，您可能必须双击样式标记之间的样式。
通常，当我想要阅读这样的内容时，我会将其复制到我的编辑器中，并在那里查看：
正如你所看到的，你所有的样式都是在这里定义的。Stenciljs还加载了一些通用样式，以确保所有内容看起来都正确。这些被实例化到head部分中：
Stack Overflow用户
发布于 2019-11-09 23:18:33
所以我认为离子4正在使用：https://developers.google.com/web/updates/2019/02/constructable-stylesheets
这就是为什么样式不能直接在DOM中看到的原因。这要归功于弗雷泽，他解决了这个问题。
https://stackoverflow.com/questions/58747696
复制相似问题
腾讯云开发者
