Work with anchor and target inside same shadow root #353
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| #shadow-anchor-positioning { | ||
| anchor-name: --shadow-anchor-positioning; | ||
| } | ||
|
|
||
| #shadow-target-positioning { | ||
| position: absolute; | ||
| right: anchor(--shadow-anchor-positioning right, 50px); | ||
| top: anchor(--shadow-anchor-positioning bottom); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>CSS Anchor Positioning Polyfill</title> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://unpkg.com/[email protected]/themes/prism.css" | ||
| /> | ||
| <script | ||
| src="https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js" | ||
| crossorigin="anonymous" | ||
| defer | ||
| ></script> | ||
| <!-- TypeKit Fonts --> | ||
| <script src="https://use.typekit.net/slx1xnq.js"></script> | ||
| <script> | ||
| try { | ||
| Typekit.load({ async: true }); | ||
| } catch (e) {} | ||
| </script> | ||
| <link rel="stylesheet" href="/demo.css" /> | ||
| <style> | ||
| anchor-web-component { | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import polyfill from '/src/index-fn.ts'; | ||
|
|
||
| const SUPPORTS_ANCHOR_POSITIONING = | ||
| 'anchorName' in document.documentElement.style; | ||
|
|
||
| const btn = document.getElementById('apply-polyfill'); | ||
|
|
||
| if (!SUPPORTS_ANCHOR_POSITIONING) { | ||
| btn.addEventListener('click', () => { | ||
| document | ||
| .querySelector('anchor-web-component') | ||
| .applyPolyfill() | ||
| .then(() => { | ||
| btn.innerText = 'Polyfill Applied'; | ||
| btn.setAttribute('disabled', ''); | ||
| }); | ||
| }); | ||
| } else { | ||
| btn.innerText = 'No Polyfill Needed'; | ||
| btn.setAttribute('disabled', ''); | ||
| console.log( | ||
| 'anchor-positioning is supported in this browser; polyfill skipped.', | ||
| ); | ||
| } | ||
|
|
||
| class AnchorWebComponent extends HTMLElement { | ||
| /* This would typically be run in connectedCallback() */ | ||
| applyPolyfill() { | ||
| return polyfill({ roots: [this.shadowRoot] }); | ||
| } | ||
| } | ||
| customElements.define('anchor-web-component', AnchorWebComponent); | ||
| </script> | ||
| <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> | ||
| <script src="https://unpkg.com/[email protected]/components/prism-core.min.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script> | ||
| <script | ||
| defer | ||
| data-domain="anchor-positioning.oddbird.net" | ||
| src="https://plausible.io/js/script.hash.outbound-links.js" | ||
| ></script> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1><a href="/">CSS Anchor Positioning Polyfill</a></h1> | ||
| <nav> | ||
| <span> See also: </span> | ||
| <a | ||
| href="https://github.com/web-platform-tests/wpt/tree/master/css/css-anchor-position" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >WPT examples</a | ||
| > | ||
| <!-- <a | ||
| href="https://anchor-position-wpt.netlify.app/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >WPT results</a | ||
| > --> | ||
| <a | ||
| href="https://drafts.csswg.org/css-anchor-position/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >Draft Spec</a | ||
| > | ||
| </nav> | ||
| <button id="apply-polyfill" data-button="apply-polyfill" type="button"> | ||
| Apply Polyfill | ||
| </button> | ||
| </header> | ||
| <section> | ||
| <h2>Anchoring Elements in the shadow DOM</h2> | ||
| <p> | ||
| <strong>Note: </strong>We strive to keep the polyfill up-to-date with | ||
| ongoing changes to the spec, and we welcome | ||
| <a | ||
| href="https://github.com/oddbird/css-anchor-positioning" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >code contributions</a | ||
| > | ||
| and <a href="#sponsor">financial support</a> to make that happen. | ||
| </p> | ||
| </section> | ||
| <section id="shadow-root" class="demo-item"> | ||
| <h2> | ||
| <a href="#shadow-root" aria-hidden="true">🔗</a> | ||
| Works if anchor and target are both inside the same shadow root | ||
| </h2> | ||
| <div class="demo-elements"> | ||
| <anchor-web-component> | ||
| <template shadowrootmode="open"> | ||
| <link rel="stylesheet" href="/demo.css" /> | ||
| <link rel="stylesheet" href="/anchor-shadow-root.css" /> | ||
| <div style="position: relative"> | ||
| <div id="shadow-target-positioning" class="target">Target</div> | ||
| <div id="shadow-anchor-positioning" class="anchor">Anchor</div> | ||
| </div> | ||
| </template> | ||
| </anchor-web-component> | ||
| </div> | ||
| <div class="note"> | ||
| <p> | ||
| With polyfill applied: Target and Anchor’s right edges line up. | ||
| Target’s top edge lines up with the bottom edge of the Anchor. | ||
| </p> | ||
| <p> | ||
| <strong>Note: </strong> this will not work across shadow root | ||
| boundaries, and will not work with constructed stylesheets. | ||
| </p> | ||
| </div> | ||
|
|
||
| <pre><code class="language-html" | ||
| ><anchor-web-component> | ||
| <template shadowrootmode="open"> | ||
| <style> | ||
| #my-anchor-positioning { | ||
| anchor-name: --my-anchor-positioning; | ||
| } | ||
|
|
||
| #my-target-positioning { | ||
| position: absolute; | ||
| top: anchor(--my-anchor-positioning bottom); | ||
| right: anchor(--my-anchor-positioning right, 50px); | ||
| } | ||
| </style> | ||
| <div style="position: relative"> | ||
| <div id="my-target-positioning">Target</div> | ||
| <div id="my-anchor-positioning">Anchor</div> | ||
| </div> | ||
| </template> | ||
| </anchor-web-component> | ||
| <script> | ||
| class AnchorDemo extends HTMLElement { | ||
| connectedCallback() { | ||
| window.ANCHOR_POSITIONING_POLYFILL({ roots: [this.shadowRoot] }); | ||
| } | ||
| } | ||
| customElements.define("anchor-web-component", AnchorDemo); | ||
| </script> | ||
| </code></pre> | ||
| </section> | ||
| <section id="sponsor"> | ||
| <h2>Sponsor OddBird’s OSS Work</h2> | ||
| <p> | ||
| At OddBird, we love contributing to the languages & tools developers | ||
| rely on. We’re currently working on polyfills for new Popover & Anchor | ||
| Positioning functionality, as well as CSS specifications for functions, | ||
| mixins, and responsive typography. Help us keep this work sustainable | ||
| and centered on your needs as a developer! We display sponsor logos and | ||
| avatars on our | ||
| <a | ||
| href="https://www.oddbird.net/polyfill/#open-source-sponsors" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >website</a | ||
| >. | ||
| </p> | ||
| <a | ||
| href="https://github.com/sponsors/oddbird" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >Sponsor OddBird’s OSS Work</a | ||
| > | ||
| </section> | ||
| <footer> | ||
| <p> | ||
| Spec proposal by | ||
| <a | ||
| href="http://xanthir.com/contact/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >Tab Atkins-Bittner</a | ||
| >. Polyfill and demo by | ||
| <a | ||
| href="https://www.oddbird.net/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >OddBird</a | ||
| >. | ||
| </p> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.