Skip to content

Instantly share code, notes, and snippets.

@domenic
Last active Aug 29, 2015
Embed
What would you like to do?
Styling shadow DOM
<template>
<style>
#label {
background: var(--nametag-background);
}
#name {
@extend %nametag-name;
}
</style>
<p id="label">Hello my name is</p>
<p id="name"><content select="name"></content></p>
</template>
<!-- assume we also set up a <name-tag> custom element using this template -->
<style>
name-tag#foo %nametag-name {
color: blue;
opacity: 0.5;
}
name-tag#foo {
--nametag-background: linear-gradient(green, blue);
}
</style>
<p>Here's a name tag:</p>
<name-tag id="foo"><name>Domenic</name></name-tag>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment