slotted-pseudo-element.html | Explore in Territory

<!DOCTYPE html>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<div id="sandbox"></div>
<script>
var shadowStyle = document.createElement('style');
shadowStyle.innerHTML = '::slotted(div) { color: green; }'
                        + '::slotted(div.blue) { color: blue; }'
                        + 'slot::slotted(div#red) { color: red; }'
                        + 'slot::slotted(div[data-color=purple]) { color: purple; }';

var sandbox = document.getElementById('sandbox');
sandbox.appendChild(
    createDOM('div', {},
              attachShadow(
                  {'mode': 'open'},
                  shadowStyle,
                  createDOM('slot')),
              createDOM('div', {},
                        document.createTextNode('green')),
              createDOM('div', {class: 'blue'},
                        document.createTextNode('blue')),
              createDOM('div', {id: 'red'},
                        document.createTextNode('red')),
              createDOM('div', {'data-color': 'purple'},
                        document.createTextNode('purple'))));
</script>

chromium/third_party/blink/web_tests/shadow-dom/slotted-pseudo-element.html