English
Search
⌃K
Links

use-css-light-dom

share your style sheets between LightDOM and ShadowDOM
This hook creates a style tag in the lightDOM of the component, in order to insert that directly affect the lightDOM, before using this hook consider:
  1. 1.
    The css is not isolated as if it occurs in the shadowDOM.
  2. 2.
    It does not support the use of ::slotted selector.

Module

import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";

Syntax

useCssLightDom(sheets: import("atomico").Sheets);

Example

import { css } from "atomico";
import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";
​
const sheet = css`
:host {
display: block;
background: black;
color: white;
padding: 100px;
border-radius: 1rem;
}
:host(:hover) {
background: crimson;
}
`;
​
function myExample() {
useCssLightDom(sheet);
return (
<host>
<h1>Hello</h1>
</host>
);
}