# be-adopted

Latest version **0.0.11** (published 2022-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-adopted
pnpm add be-adopted
yarn add be-adopted
bun add be-adopted
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2022-10-30 |
| First published | 2022-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements, preload, css-modules |

## Links

- npm: https://www.npmjs.com/package/be-adopted
- Repository: https://github.com/bahrus/be-adopted
- Homepage: https://github.com/bahrus/be-adopted#readme
- Issues: https://github.com/bahrus/be-adopted/issues
- npm.io page: https://npm.io/package/be-adopted

## Dependencies (2)

- [be-loaded](https://npm.io/package/be-loaded.md) 0.0.91
- [be-decorated](https://npm.io/package/be-decorated.md) 0.0.190

## Recent versions

- 0.0.11 (latest) — 2022-10-30
- 0.0.10 — 2022-10-16
- 0.0.9 — 2022-10-16
- 0.0.8 — 2022-09-06
- 0.0.7 — 2022-09-04
- 0.0.6 — 2022-08-28
- 0.0.5 — 2022-08-27
- 0.0.4 — 2022-08-09
- 0.0.3 — 2022-05-12
- 0.0.2 — 2022-05-11
- 0.0.1 — 2022-05-11
- 0.0.0 — 2022-02-19

## README

# be-adopted

<a href="https://nodei.co/npm/be-adopted/"><img src="https://nodei.co/npm/be-adopted.png"></a>

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

<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-adopted?compression=gzip">

be-adopted is an HTML style tag decorator / behavior based on the [be-decorated](https://github.com/bahrus/be-decorated) approach to progressively enhancing elements.

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

```html
<html>
    <head>
        ...
        <link be-preemptive rel=preload id=@my-package/my-web-component/my-styles.css integrity=...>
    </head>
    <body>
        ...
        <my-web-component>
            <style be-adopted=@my-package/my-web-component/my-styles.css></style>
        </my-web-component>
    </body>
</html>
```

be-adopted plays by the same rule-book as [be-loaded](https://github.com/bahrus/be-loaded).  The difference is be-loaded adds style to the shadow DOM realm it belongs to.

be-adopted, instead, does the following:

1.  It adds itself to the shadowRoot of the parent element.
2.  It changes its attribute from be-adopted to be-loaded.

So if my-web-component's internal shadowDOM opts in to incorporate be-loaded, it will "adopt" the styles.

## Why?

**The strong case:**  Sometimes a web component is specifically designed to allow the consumer to provide templates that are used within its shadow DOM.  This component provides a common usage pattern for specifying styles as well.

**The weak case:** Sometimes a web component doesn't provide enough flexibility as far as styling.  This component can help in a pinch.

## Really opting in

There's one more step that may be necessary for the component being targeted to opt in -- if the light children are not slotted somewhere, and if my-web-component is likely to be upgraded prior to be-adopted getting upgraded, then the style tag might not be "visible", which is a requirement for be-decorated based decorators / behaviors to be initialized.

So to be safe, the targeted component should also provide one slot for be-adopted to use in order to work.

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