Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Allow to style nested elements shadow root on themes
See original GitHub issueI’m looking for customizing cards in HA via a theme (so all cards will have my changes applied).
I currently have:
card-mod-theme: "Google Dark Theme"
card-mod-card: |
ha-card.type-picture-glance hui-image {
max-height: 115px;
filter: brightness(0.7);
}
Which works, I can successfully style the hui-image element, but what I’m really trying to reach is the <img> under the shadow-root of hui-image. I can’t find a cascade way to reach that.
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Styling nested Shadow DOMs - Stack Overflow
I use the vaadin web component in a custom web component. At the moment, I can style the vaadin-text-field with the following CSS:...
Read more >Revisiting Shadow DOM: Nested items, dynamic templates ...
Our ShadowDOM elements are scoped so you'll want to directly define styles within the templates or share the styles from another source. I ......
Read more >Styling in the Shadow DOM With CSS Shadow Parts
Styles can be applied using HTML element selectors like <button> and <div> . These styles could break a component. Shadow DOM is the...
Read more >Theming options for shadow roots · Issue #864 - GitHub
Let components pick up matching style sheets from the global scope ... it needs to be present in every shadowRoot for this to...
Read more >Shadow DOM styling - The Modern JavaScript Tutorial
As a general rule, local styles work only inside the shadow tree, and document styles work outside of it. But there are few...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ok thank you, I will try to redo my style here. Congrats for the nice lib.
ha-card.type-picture-glance hui-image:?