open-styleable

A proof-of-concept implementation of open-styleable shadow-roots, using a combination of:

A build-time HTML transform for declarative shadow DOM
A client-side script that overrides attachShadow

Demo

View the hosted examples:

Edit the code live:

Usage

(See standalone setup instructions below if you're trying to use this in your own project) 👀

The access for open styles is controlled at the shadow-root level. Every shadow-root needs to explicitly opt-in using one of the following ways.

For declarative shadow DOM (DSD):

Add the adopthoststyles attribute to the DSD template. This shadow-root will now automatically inherit all styles from the host context (i.e. the document or a parent shadow-root).
```
<template shadowrootmode="open" adopthoststyles>…</template>
```
Alternatively, if you only want to adopt styles from the document and not from the parent shadow-root, then you can use adoptpagestyles.
```
<template shadowrootmode="open" adoptpagestyles>…</template>
```

For client-rendered shadow-roots, use the adoptPageStyles and adoptHostStyles options when calling attachShadow.

Use adoptHostStyles to adopt all styles from the host context.

this.attachShadow({
mode: "open",
adoptHostStyles: true,
});

Use adoptPageStyles to adopt all styles from the page/document only.
```
this.attachShadow({
mode: "open",
adoptPageStyles: true,
});
```

[!IMPORTANT] There are some known limitations/caveats that you should be aware of.

Standalone setup

To use this "polyfill" in your own project:

Install open-styleable from npm (or use import maps).
```
npm add open-styleable
```

Hook up the HTML transform into your templating system (see .eleventy.js for an example). This should ideally be executed after all bundling steps.

import { transformHtml } from "open-styleable";

// assuming `htmlContent` is the original page content
htmlContent = transformHtml(htmlContent);

Include the /client script in your <head> before any custom elements are registered.

<script>
import "open-styleable/client";
</script>

or from a CDN:

<script src="https://esm.sh/open-styleable/client"></script>

[!NOTE] You do not always need to use both the build-time transform and the client-side script. They are completely independent and do different things.

Development

This demo is built with 11ty. All test pages go in the pages/ directory.

Local setup

To run it locally, clone the repo and follow these steps: 1. Install dependencies. ``` npm install ``` 2. Start the dev server. ``` npm run dev ``` 3. Open up `localhost:1174` in your browser.

mayank99 / open-styleable

readme

open-styleable

Demo

Usage

Standalone setup

Development