Web Components in Action v6; Listing 10.10 Using CSS Variables in a Web Component’s Shadow DOM
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <!-- | |
| file: index.html | |
| Web Components in Action MEAP v6 | |
| original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter10/10.2-cssvariables/shadow.html | |
| #1 | |
| Defining a default value in case the custom property is not defined | |
| https://developer.mozilla.org/en-US/docs/Web/CSS/var | |
| --> | |
| <title>CSS Variables (Custom Properties)</title> | |
| <style> | |
| sample-component { | |
| /* --text-color: blue; */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <sample-component></sample-component> | |
| <template> | |
| <style> | |
| .inside-component { | |
| color: var(--text-color, red); /* #1 */ | |
| } | |
| </style> | |
| <div class="inside-component">My Component</div> | |
| </template> | |
| <script type="module"> | |
| const template = document.querySelector('template') | |
| class SampleComponent extends HTMLElement { | |
| constructor() { | |
| super() | |
| this.attachShadow({mode: 'open'}) | |
| const clone = document.importNode(template.content, true) | |
| this.shadowRoot.appendChild(clone) | |
| } | |
| } | |
| if (!customElements.get('sample-component')) { | |
| customElements.define('sample-component', SampleComponent) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment