Skip to content

Instantly share code, notes, and snippets.

@peerreynders

peerreynders/index.html

Created April 5, 2019 13:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peerreynders/33c98ffb7b35bd9aeaed524332bf640a to your computer and use it in GitHub Desktop.
Save peerreynders/33c98ffb7b35bd9aeaed524332bf640a to your computer and use it in GitHub Desktop.
Download ZIP
Web Components in Action v6; Listing 10.10 Using CSS Variables in a Web Component’s Shadow DOM
Raw
index.html
<!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