If it's an object, you can move on to the next ste. If this is a string, you're at the end of the chain. This is the style information that step of the chain was given.
If we look at the card in the element inspector of chrome, it looks like this: Let's change the color of all third level titles ( # like this) in a markdown card, and also change it's background. " (a period) will select the current element. The process is recursive, so the value may also be a dictionary.
NOTE: The modified querySelector() function will replace a dollar sign ( $) with a #shadow-root in the selector. The value of the entry will then be injected into those elements. In order to style elements inside a shadow-root, you will need to make your style: a dictionary rather than a string.įor each dictionary entry the key will be used to select one or several elements through a modified querySelector() function. When exploring the cards in your browsers element inspector you may have come across a line that says something like " #shadow-root (open)" (exactly what it says depends on your browser) and have noticed that elements inside that does not inherit the styles from outside. This allows for easy reuse of components (such as ha-card or ha-icon) but causes some problems when trying to apply CSS styles to things. Home Assistant makes extensive use of something called shadow DOM.