Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2015
What would you like to do?
Styling shadow DOM
#label {
background: var(--nametag-background);
#name {
@extend %nametag-name;
<p id="label">Hello my name is</p>
<p id="name"><content select="name"></content></p>
<!-- assume we also set up a <name-tag> custom element using this template -->
name-tag#foo %nametag-name {
color: blue;
opacity: 0.5;
name-tag#foo {
--nametag-background: linear-gradient(green, blue);
<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