Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Web Components in Action v6; Listing 10.10 Using CSS Variables in a Web Component’s Shadow DOM
<!DOCTYPE html>
<head lang="en">
file: index.html
Web Components in Action MEAP v6
Defining a default value in case the custom property is not defined
<title>CSS Variables (Custom Properties)</title>
sample-component {
/* --text-color: blue; */
.inside-component {
color: var(--text-color, red); /* #1 */
<div class="inside-component">My Component</div>
<script type="module">
const template = document.querySelector('template')
class SampleComponent extends HTMLElement {
constructor() {
this.attachShadow({mode: 'open'})
const clone = document.importNode(template.content, true)
if (!customElements.get('sample-component')) {
customElements.define('sample-component', SampleComponent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.