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





[![Actions Status](https://github.com/bahrus/transient-style/workflows/CI/badge.svg)](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.

```