Manage Home Assistant styles per DOM elements

npm install home-assistant-styles-manager

yarn add home-assistant-styles-manager

pnpm add home-assistant-styles-manager

The HomeAssistantStylesManager class can be instantiated sending an optional options object.

new HomeAssistantStylesManager([options])

Given an HTMLElement or a ShadowRoot element, returns the style element associated with it.

getStyleElement(root: HTMLElement | ShadowRoot): HTMLStyleElement | null

Given a CSS string or a CSS object and an HTMLElement or a ShadowRoot element, it adds a style element containing the CSS string or replace its content with the CSS string if it already exists.

addStyle(
  css: string | CSSInJs | (string | CSSInJs)[],
  root: HTMLElement | ShadowRoot
): void

The css property can be a CSS string but also a CSS-in-JS object or an array of CSS-in-JS objects and strings. Any rule with a false value will get hidden.

For eaxample, the next CSS-in-JS object:

{
  '.some-rule': {
    backgroundColor: 'red',
    SomeVariable: '10px'
  },
  '.hide-rule': false
}

Will be compiled to:

.some-rule {
  background-color: red;
  --some-variable: 10px;
}
.hide-rule {
  display: none !important;
}

Given an HTMLElement or a ShadowRoot element, it removes the style element associated to it (if it exists).

removeStyle(root: HTMLElement | ShadowRoot): void