|
1 | | -# AdoptedStyleSheets Controller |
| 1 | +# `AdoptedStylesheets` Controller |
2 | 2 |
|
3 | | -The `AdoptedStyleSheets` controller is a part of the `@phase2/outline-adopted-stylesheets-controller` package. This controller helps components attach "global" document styles without duplication at the component level as well as de-duping any previous inclusions into `AdoptedStyleSheets`. |
| 3 | +[](https://www.npmjs.com/package/@phase2/outline-adopted-stylesheets-controller) |
| 4 | + |
| 5 | +> The `AdoptedStylesheets` controller is a part of the `@phase2/outline-adopted-stylesheets-controller` package. This controller helps components attach "global" document styles without duplication at the component level as well as de-duping any previous inclusions into `AdoptedStylesheets`. |
| 6 | +
|
| 7 | +## Installing the `AdoptedStylesheets` Controller |
| 8 | + |
| 9 | +Install the new package: |
| 10 | + |
| 11 | +```bash |
| 12 | +yarn add @phase2/outline-adopted-stylesheets-controller |
| 13 | +``` |
4 | 14 |
|
5 | 15 | ## Overview |
6 | 16 |
|
7 | | -Adopted stylesheets are a way to apply styles to a document or a shadow root. They are a part of the CSS Shadow Parts specification. You can read more about them [here](https://wicg.github.io/construct-stylesheets/). |
| 17 | +Adopted stylesheets are a method to apply styles to a document or a shadow root. They are a part of the CSS Shadow Parts specification. Unfortunately, the original documentation link is no longer available. However, you can find more information about adopted stylesheets and their usage in web components in the following resources: |
| 18 | + |
| 19 | +- [MDN Web Docs: Document adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets): This documentation provides an in-depth look at the `adoptedStyleSheets` property of the `Document` interface. |
| 20 | +- [MDN Web Docs: ShadowRoot adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets): This documentation provides an in-depth look at the `adoptedStyleSheets` property of the `ShadowRoot` interface. |
8 | 21 |
|
9 | 22 | ## Methods |
10 | 23 |
|
11 | | -The `AdoptedStyleSheets` controller provides the following methods: |
| 24 | +The `AdoptedStylesheets` controller provides the following methods: |
12 | 25 |
|
13 | | -- `constructor(globalStyles: CSSResult)`: This method is used to create a new instance of the `AdoptedStyleSheets` controller. It takes a `CSSResult` object as a parameter, which represents the global styles to be adopted. |
| 26 | +- `constructor(globalStyles: CSSResult)`: This method is used to create a new instance of the `AdoptedStylesheets` controller. It takes a `CSSResult` object as a parameter, which represents the global styles to be adopted. |
14 | 27 |
|
15 | 28 | - `hostConnected()`: This method is called when the host element is connected to the DOM. It adds the document's stylesheet to the adopted stylesheets if it is not already present. |
16 | 29 |
|
17 | 30 | - `hostDisconnected()`: This method is called when the host element is disconnected from the DOM. It removes the document's stylesheet from the adopted stylesheets if it is present. |
18 | 31 |
|
19 | 32 | ## Usage |
20 | 33 |
|
21 | | -Here is an example of how to use the `AdoptedStyleSheets` controller in a component: |
| 34 | +Here is an example of how to use the `AdoptedStylesheets` controller in a component: |
22 | 35 |
|
23 | 36 | ```typescript |
24 | | -import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller'; |
| 37 | +import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; |
25 | 38 | import { css, CSSResult } from 'lit'; |
26 | 39 | import { OutlineElement } from '@phase2/outline-core'; |
27 | 40 | import globalStyles from './my-component.lightDom.css.lit'; |
28 | 41 |
|
29 | 42 | class MyComponent extends OutlineElement { |
30 | | - adoptedStylesheets: AdoptedStyleSheets; |
| 43 | + AdoptedStylesheets: AdoptedStylesheets; |
31 | 44 |
|
32 | 45 | connectedCallback() { |
33 | 46 | super.connectedCallback(); |
34 | | - this.adoptedStylesheets = new AdoptedStyleSheets(globalStyles); |
35 | | - this.addController(this.adoptedStylesheets); |
| 47 | + this.AdoptedStylesheets = new AdoptedStylesheets(globalStyles); |
| 48 | + this.addController(this.AdoptedStylesheets); |
36 | 49 | } |
37 | 50 | } |
38 | 51 | ``` |
39 | 52 |
|
40 | | -In the provided example, the `connectedCallback` method is utilized. This method is invoked whenever the element is inserted into the DOM. Within this method, an instance of `AdoptedStyleSheets` is created and added as a controller. This is a more efficient approach than creating the instance and adding the controller within the `constructor`. The reason for this is that it delays these operations until the element is actually inserted into the DOM. If there are many such elements that are created but not immediately added to the DOM, this approach can significantly improve the startup performance of your application. Therefore, the `connectedCallback` method is a crucial part of managing the lifecycle of a web component, especially when dealing with adopted stylesheets. |
| 53 | +In the provided example, the `connectedCallback` method is utilized. This method is invoked whenever the element is inserted into the DOM. Within this method, an instance of `AdoptedStylesheets` is created and added as a controller. This is a more efficient approach than creating the instance and adding the controller within the `constructor`. The reason for this is that it delays these operations until the element is actually inserted into the DOM. If there are many such elements that are created but not immediately added to the DOM, this approach can significantly improve the startup performance of your application. Therefore, the `connectedCallback` method is a crucial part of managing the lifecycle of a web component, especially when dealing with adopted stylesheets. |
0 commit comments