https://github.com/bahrus/be-adoptive

be-adoptive allows Shadow DOM to inherit styles from the parent element.
https://github.com/bahrus/be-adoptive

custom-element custom-elements shadow-dom stylesheets web-component web-components

Last synced: 3 months ago
JSON representation

be-adoptive allows Shadow DOM to inherit styles from the parent element.

• Host: GitHub
• URL: https://github.com/bahrus/be-adoptive
• Owner: bahrus
• License: mit
• Created: 2021-10-11T15:30:12.000Z (over 3 years ago)
• Default Branch: baseline
• Last Pushed: 2024-01-08T11:57:41.000Z (over 1 year ago)
• Last Synced: 2025-02-01T22:02:53.592Z (4 months ago)
• Topics: custom-element, custom-elements, shadow-dom, stylesheets, web-component, web-components
• Language: TypeScript
• Homepage:
• Size: 662 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# be-adoptive

be-adoptive allows Shadow DOM to inherit styles from the parent element.

This provides a way to benefit from the slotting Shadow DOM provides, while being able to apply styles from the outside.

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/be-adoptive)

[![Playwright Tests](https://github.com/bahrus/be-adoptive/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-adoptive/actions/workflows/CI.yml)



[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-adoptive?style=for-the-badge)](https://bundlephobia.com/result?p=be-adoptive)



## [Demo](https://codepen.io/bahrus/pen/porYqaz)  

Native support in Firefox and Safari for constructible stylesheets is now available!

## Syntax:

```html

    span{

        color: red;

    }



    

        

            div{

                color: green;

            }

        

        Hello

        

    



Hello


```

To be fully HTML5 compatible, use data-be-adoptive instead of be-adoptive.

The be-hive component allows us to specify an alternative attribute name, and acts as a "conduit" for all the [be-*](https://github.com/bahrus?tab=repositories&q=be-&type=&language=&sort=) components.  Alternatively, we can place an instance of the be-adoptive web component in our shadow DOM, and that will have the same effect.

> **Note**: It has become clear to me, after [following](https://toot.cafe/@nolan/109621170874013105) a discussion of an alternative [open-stylable](https://github.com/nolanlawson/open-stylable), that this solution is far from complete.  To be complete, the platform would need to provide a mechanism to subscribe to additions / removals of stylesheets from any Shadow DOM realm.  Or implement [this proposal](https://github.com/WICG/webcomponents/issues/909), which would render this behavior obsolete (which would be great).

## Viewing Locally

1.  Install git.

2.  Fork/clone this repo.

3.  Install node.

4.  Open command window to folder where you cloned this repo.

5.  > npm install

6.  > npm run serve

7.  Open http://localhost:3030/demo/dev in a modern browser.