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

Question

I'm trying to understand how and where ionic 4 is injecting the styling for the web components into the dom. I'm not interested in changing it via the CSS variables but I want to be able to inspect the component and see where the styling is coming from. For example on https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios

If you inspect the button:

I can see the stlying being applied but I can't see where all the styling is coming from, it's not in the css bundle, style tags on the page or directly on the element or applied to the shadow-root. Normally the host styling is part of the component eg

So where is the:host styling being defined and how/where is it being injected into the DOM?

Answer 1

So as far as I know all the styles you apply to your component are usually set innerHTML. You already found the style tag which is the first tag after the component. This is super full with stylings as always thats why you usually see just a snippet. That depends on the browser but to see all the stylings you may have to do a double click into the stylings between the style tags.

Usually when I want to read something like this I copy it into my editor and take a look there:

As you can see all your stylings are defined there. Stenciljs also load some general stylings to make sure everything looks proper. These are instantiated into your head section:

Answer 2

So I think Ionic 4 is using: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Which is why the styling isn't visible directly in the DOM. Credit to Fraser for working this out.