JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-element" noscript>
    <template>
        <style>
            :host {
                display: block;
                color: blue;
            }
        </style>
        <p>
            Test element.
        </p>
        <content></content>
    </template>
</polymer-element>

<div id="container">
    <test-element>Foo.</test-element>

    <a id="toggle" href="#">Toogle styles (add/remove .on to #container)</a>
    
<p>
    This <em>seems</em> strange.
</p>
<p>
    In theory styles from the Light DOM shouldn't leak into the Shadow DOM, but if a style in the Light DOM uses the universal selector, <code>*</code> it pierces the shadow boundary (unintentionally?).
</p>
    <p>
        If the <code>:host</code> selector is rewritten to use <code>:host *</code> (<a href="http://jsfiddle.net/wrumsby/ekjdfcht/">like this</a>) then the styles are encapsulated in a <em>limited</em> way - <code>content</code> nodes are still affected by the outer <code>*</code> selector rule.
    </p>
</div>

CSS

body {
    color: #663399;
    font-family: sans-serif;
}

.on * {
    color: red;
}

#container {
    border: 1px solid blue;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 10px;
}

#container.on {
    border-style: dotted;
}

JavaScript

(function () {
    'use strict';
    
    var toggleEl = document.querySelector('#toggle'),
        containerEl = document.querySelector('#container');
    
    toggleEl.addEventListener('click', function (e) {
        e.preventDefault();
        containerEl.classList.toggle('on');
    });
}());