# @webcomponents/shadydom

> Shadow DOM polyfill

Latest version **1.11.0** (published 2023-03-30) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @webcomponents/shadydom
pnpm add @webcomponents/shadydom
yarn add @webcomponents/shadydom
bun add @webcomponents/shadydom
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.11.0 |
| Published | 2023-03-30 |
| First published | 2017-05-11 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 578.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1189 |
| Author | The Polymer Project Authors |
| Maintainers | webcomponents-devs, bicknellr, azakus, aomarks |
| Keywords | shady-dom, shadydom, shadow-dom, shadowdom, web-components, webcomponents, polyfill, shim |

## Links

- npm: https://www.npmjs.com/package/@webcomponents/shadydom
- Repository: https://github.com/webcomponents/polyfills
- Homepage: https://github.com/webcomponents/polyfills/tree/master/packages/shadydom
- Issues: https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A"Package%3A+shadydom"
- npm.io page: https://npm.io/package/@webcomponents/shadydom

## Recent versions

- 1.11.0 (latest) — 2023-03-30
- 1.0.0-rc.8 (rc) — 2017-05-11
- 1.10.0 — 2022-10-20
- 1.9.0 — 2021-08-02
- 1.8.0 — 2020-10-21
- 1.7.4 — 2020-07-20
- 1.7.3 — 2020-03-16
- 1.7.2 — 2020-02-26
- 1.7.1 — 2020-01-08
- 1.7.0 — 2019-11-13
- 1.6.1 — 2019-09-19
- 1.6.0 — 2019-04-16
- 1.5.1 — 2019-04-09
- 1.5.0 — 2019-02-06
- 1.4.3 — 2019-02-01
- … 24 more at https://npm.io/package/@webcomponents/shadydom/versions

## README

# ShadyDOM

ShadyDOM provides a shim for ShadowDOM V1. It is less correct but less intrusive
and faster than the ShadowDOM Polyfill.

## Usage

Usage of the shim is transparent when `attachShadow` is unavailable. Elements are
patched as needed to report ShadowDOM correct dom information. Only dom tree
accessors and mutation api is maintained. Some dom api
(for example MutationObservers) is not shimmed.

To force ShadyDOM to be used even when native ShadowDOM is available, set
the `ShadyDOM = {force: true}` in a script prior to loading the polyfill.

## Example

```html
<div id="host"></div>
<script>
  host.attachShadow({mode: 'open'});
  host.shadowRoot.appendChild(document.createElement('a'));
</script>
```

## Building and Testing

For building and testing, first run

```
npm install
npm run build
```

To test, run `npm test`

## Limitations

ShadyDOM distribution is asynchronous for performance reasons. This means that
the composed dom will be available 1 microtask after the dom mutation occurs.
For testing, `ShadyDOM.flush` may be called to force syncronous composition.

ShadowDOM compatible styling is _not_ provided with the ShadyDOM shim. To
shim ShadowDOM styling, use the [shadycss](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) shim.

On very old versions of Chrome and Safari, in rare cases `ShadyDOM.patch(node)`
must be called to properly set `textContent` or `innerHTML`. On these browsers,
element property accessors like `firstChild` and `textContent` cannot be
modified on the element prototype and instances must be patched. This is
automated but there are some cases that are not handled.
This should only be an issue when setting `textContent` or `innerHTML` on a
node inside a shadowRoot adds or removes a `<slot>` element.
In this case, the shadowRoot will not render correctly. To workaround this,
call `ShadyDOM.patch(node)` prior to setting `textContent` or `innerHTML`.

The APIs `Document.querySelectorAll`, `Element.querySelectorAll`, `Node.childNodes`,
and `ParentNode.children` each return an `Array` instead of a `NodeList` or `HTMLCollection`.

---
_Source: https://npm.io/package/@webcomponents/shadydom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._