https://github.com/bahrus/transient-style
Provide transient styling of light children
https://github.com/bahrus/transient-style
custom-element custom-elements webcomponent webcomponents
Last synced: 4 months ago
JSON representation
Provide transient styling of light children
- Host: GitHub
- URL: https://github.com/bahrus/transient-style
- Owner: bahrus
- License: mit
- Created: 2021-03-27T15:46:45.000Z (about 4 years ago)
- Default Branch: baseline
- Last Pushed: 2021-04-02T22:55:29.000Z (about 4 years ago)
- Last Synced: 2024-04-24T16:09:59.515Z (about 1 year ago)
- Topics: custom-element, custom-elements, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# transient-style
[](https://github.com/bahrus/transient-style/actions?query=workflow%3ACI)
transient-style is a martyr component. It removes itself from the DOM tree when the web component definitions it monitors for become registered.
The biggest use case is providing initial css rules for light children, prior to being slotted. This is important for avoiding FOUC. But leaving the styles behind when no longer applicable, could have a lasting negative impact on other light children waiting for their web components to become registered, as well as non-shadowed content.
Plus there's overhead to having styles which aren't meant to apply to anything, sitting there for no reason.
Syntax:
```html
div.forgive {
display: block;
}
div.spirit {
display: none;
}
.forgive{
display: none;
}Forgive them; for they do not know what they are doing.Into your hands I commit my spirit.
```