Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ been applied.
### Constructed stylesheets (`adoptedStyleSheets`)

If your custom elements use [constructed stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
(via `new CSSStyleSheet()` + `replaceSync()` + `shadowRoot.adoptedStyleSheets`), call `patchAndPolyfillConstructedStylesheets()` **before** any custom element's `connectedCallback` runs:
(via `new CSSStyleSheet()` + `replaceSync()` + `shadowRoot.adoptedStyleSheets`), call `patchAndPolyfillConstructedStylesheets()` **before** any of those custom elements are defined:

```html
<script type="module">
Expand All @@ -83,10 +83,27 @@ import { patchAndPolyfillConstructedStylesheets } from '@oddbird/css-anchor-posi
patchAndPolyfillConstructedStylesheets();
```

This patches `CSSStyleSheet.prototype.replaceSync` to capture
stylesheet source text, and patches the `ShadowRoot.prototype.adoptedStyleSheets`
setter to automatically run the polyfill for each shadow root once its host
element's `connectedCallback` finishes.
This patches `CSSStyleSheet.prototype.replaceSync` to capture stylesheet source
text, and patches the `ShadowRoot.prototype.adoptedStyleSheets` setter to
automatically run the polyfill for each shadow root, deferred until its host is
connected and its shadow DOM has been populated.

A host that adopts its stylesheet _before_ it is connected is positioned only if
it is a custom element defined after
`patchAndPolyfillConstructedStylesheets()` is called.

Those automatic runs use the same [options](#configuration) as `polyfill()`,
either passed directly or read from
`window.ANCHOR_POSITIONING_POLYFILL_OPTIONS`:

```js
patchAndPolyfillConstructedStylesheets({ positionAreaContainingBlock: false });
```

The `roots` and `elements` options are ignored, since each run is scoped to the
shadow root being positioned. The global is read when each run happens, not when
`patchAndPolyfillConstructedStylesheets()` is called, so it can still be set
afterwards; an explicit argument takes precedence over the global.

You can view a more complete demo
[here](https://anchor-positioning.oddbird.net/shadow-dom.html).
Expand Down
Loading
Loading