https://github.com/atomicojs/inject-style
Improves the extensibility of the CSS of your webcomponents
https://github.com/atomicojs/inject-style
css customelements shadowdom webcomponents
Last synced: about 1 year ago
JSON representation
Improves the extensibility of the CSS of your webcomponents
- Host: GitHub
- URL: https://github.com/atomicojs/inject-style
- Owner: atomicojs
- Created: 2021-05-03T15:41:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-03T16:19:18.000Z (about 5 years ago)
- Last Synced: 2024-10-29T10:09:05.404Z (over 1 year ago)
- Topics: css, customelements, shadowdom, webcomponents
- Language: JavaScript
- Homepage:
- Size: 63.5 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @atomico/inject-style
Created by [@uppercod](https://twitter.com/uppercod) with reference to [@jouni](https://twitter.com/jouni)'s work.
This webcomponent is an alternative to `::part` and allows to inject CSS outside the shadowDOM into the shadowDOM of the parent who uses this webcomponent, consider:
1. The CSS must be inside an at-rule rule `@media `.
2. The reading is static, if you want to execute dynamic effects, declare customProperty inside the `at-media` referenced by this webcomponent.
3. Safe, as the rules are injected via `insertRule`.
4. This component must be nested within shadowDOM depth 0, example `#shadow-root > inject-style`.
5. The search for css rules is limited by the `host` just like `::part`.
```xml
@media my-example {
button {
background: black;
border-radius: 100vh;
padding: 0.5rem 1rem;
color: white;
border: none;
}
}
#shadow-root
```
the css inside the at-rule `@media my-example` will exist inside my-example only if they share the tagName or a custom namespace.
## Install
```bash
npm i @atomico/inject-style
```
## Usage
### [Atomico](https://atomicojs.github.io/)
```jsx
import { c } from "atomico";
import "@atomico/inject-style";
function component() {
return (
...DOM
);
}
customElements.define("my-component", c(component));
```
Remember in Atomico you can also use Constructors to instantiate the webcomponent, example ``.
### Vinilla JS
```js
import "@atomico/inject-style";
class Component extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
...DOM
`;
}
}
```
## Properties
| Property | Type | Description |
| --------- | ------ | ------------------------------------------------------------ |
| namespace | String | Permite añadir un namespace adicional a la catura de at-rule |