Components

Style in DOM

This is a "<red-element />". By default the content is red, as defined by the "style" tag present in the shadow root. 
* {color:red}
This is a "<green-element />". By default the content is green, as defined by the "style" tag present in the shadow root. 
* {color:green}
This is a "<blue-element />". By default the content is blue, as defined by the "style" tag present in the shadow root. 
* {color:blue}

Using "part" psuedo-element

This is a "<red-element />". By default the content is red, as defined by the "style" tag present in the shadow root. 
* {color:red}
The color is overridden by defining styles on the "::part(content)" psudeo-element. 
.black::part(content) {color: black}

Using standard styles

This is a "<green-element />". By default the content is green, as defined by the "style" tag present in the shadow root. 
* {color:green}
Styles on children can be selectively overridden using standard methods: 
.blue {color:blue}