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.The css is not isolated as if it occurs in the shadowDOM.
- 2.It does not support the use of ::slotted selector.
import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";
useCssLightDom(sheets: import("atomico").Sheets);
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>
);
}
Last modified 8mo ago