Created
March 16, 2025 09:53
-
-
Save oscarmarina/52e97d65f0fe1c7d87a5eba2b249ea39 to your computer and use it in GitHub Desktop.
Styled container query does not work on the :host CSS pseudo-class. When using a style
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
| import {LitElement, html, css, nothing} from 'lit'; | |
| class ConsumerElement extends LitElement { | |
| static styles = css` | |
| :host { | |
| display: block; | |
| padding: 0.5rem 1rem; | |
| margin: 1rem 0; | |
| background-color: #e5c492; | |
| color: #432c00; | |
| contain: content; | |
| } | |
| :host([hidden]), | |
| [hidden] { | |
| display: none !important; | |
| } | |
| @container style(--surface: dim) { | |
| :host { | |
| background-color: #cee36a; | |
| color: #2c3400; | |
| } | |
| } | |
| `; | |
| render() { | |
| return html` | |
| <div><slot></slot></div> | |
| `; | |
| } | |
| } | |
| customElements.define('consumer-element', ConsumerElement); |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="icon" href="data:;base64,iVBORwOKGO=" /> | |
| <title>context demo</title> | |
| <script type="module" src="./provider-element.js"></script> | |
| <script type="module" src="./consumer-element.js"></script> | |
| <style> | |
| :root { | |
| font: normal medium/1.25 sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 1rem 2rem; | |
| } | |
| hr { | |
| border: none; | |
| background: linear-gradient(to right, transparent, hsla(0, 0%, 60%, 0.5), transparent); | |
| height: 0.0625rem; | |
| margin: 1rem 0; | |
| } | |
| :not(:defined) { | |
| visibility: hidden; | |
| } | |
| button { | |
| display: inline-block; | |
| padding: 0.5rem 1rem; | |
| margin: 1rem 0 0; | |
| } | |
| button span { | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| When using a style container query on the :host CSS pseudo-class, the styles don't get | |
| applied. This does work in Chrome. | |
| </p> | |
| <button type="button"> | |
| Toggle surface - | |
| <span>initial</span> | |
| </button> | |
| <hr /> | |
| <provider-element> | |
| <consumer-element>Consumer in slot</consumer-element> | |
| <consumer-element slot="container">Consumer in slot</consumer-element> | |
| </provider-element> | |
| <script> | |
| const button = document.querySelector('button'); | |
| const provider = document.querySelector('provider-element'); | |
| button.addEventListener('click', ({target}) => { | |
| provider.surface = provider.surface === 'dim' ? 'bright' : 'dim'; | |
| target.children[0].textContent = provider.surface; | |
| }); | |
| </script> | |
| </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
| { | |
| "scripts": { | |
| "start": "npx @web/dev-server --node-resolve --port 6175 --open" | |
| }, | |
| "dependencies": { | |
| "lit": "^3.2.1", | |
| "@lit/context": "^1.1.4", | |
| "@lit/reactive-element": "^2.0.4", | |
| "lit-element": "^4.1.1", | |
| "lit-html": "^3.2.1" | |
| } | |
| } |
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
| import {LitElement, html, css} from 'lit'; | |
| class ProviderElement extends LitElement { | |
| static styles = css` | |
| :host { | |
| display: block; | |
| contain: content; | |
| padding: 0.5rem 1rem; | |
| } | |
| :host([hidden]), | |
| [hidden] { | |
| display: none !important; | |
| } | |
| .container, | |
| .nested-container { | |
| padding: 1rem; | |
| } | |
| :host(:not([surface='dim'])), | |
| :host([surface='dim']) .container{ | |
| --surface: initial; | |
| background-color: #e5a427; | |
| color: #342100; | |
| } | |
| :host([surface='dim']), | |
| :host(:not([surface='dim'])) .container{ | |
| --surface: dim; | |
| /* word-spacing: 3rem; */ | |
| background-color: #543b0f; | |
| color: #ede1d3; | |
| } | |
| hr { | |
| border: none; | |
| background: linear-gradient(to right, transparent, #7b6241, transparent); | |
| height: 0.0625rem; | |
| margin: 1rem 0; | |
| } | |
| `; | |
| static properties = { | |
| surface: {reflect: true}, | |
| }; | |
| render() { | |
| return html` | |
| <p>Provider element</p> | |
| <consumer-element>Consumer in Shadow DOM</consumer-element> | |
| <slot></slot> | |
| <hr /> | |
| <div class="container"> | |
| <p>Container</p> | |
| <consumer-element>Consumer in Shadow DOM</consumer-element> | |
| <slot name="container"></slot> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('provider-element', ProviderElement); |
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
| { | |
| "files": { | |
| "index.html": { | |
| "position": 0 | |
| }, | |
| "provider-element.js": { | |
| "label": "Provider", | |
| "position": 1 | |
| }, | |
| "consumer-element.js": { | |
| "label": "Consumer", | |
| "position": 2 | |
| }, | |
| "package.json": { | |
| "position": 3, | |
| "hidden": true | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment