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

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

Syntax

1
useCssLightDom(sheets: import("atomico").Sheets);
Copied!

Example

1
import { css } from "atomico";
2
import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";
3
4
const sheet = css`
5
:host {
6
display: block;
7
background: black;
8
color: white;
9
padding: 100px;
10
border-radius: 1rem;
11
}
12
:host(:hover) {
13
background: crimson;
14
}
15
`;
16
17
function myExample() {
18
useCssLightDom(sheet);
19
return (
20
<host>
21
<h1>Hello</h1>
22
</host>
23
);
24
}
Copied!
WebComponents.dev
WebComponents.dev
Copy link
Edit on GitHub