(SO) ::slotted styling playground

::slotted(selectors) and pseudo selectors

by WebComponents

HTML

<template id=MY-ELEMENT>
  <style>
    /* there is more CSS in the global CSS file/tab */
    :host {
      display: block;
      padding: .5em;
      background: green;
      color: black;
      --dropsize: 6px;
    }

    /* slotted takes simple/compound selectors; basically anything WITHOUT a space */
    #container ::slotted(.item) {
      filter: drop-shadow(6px 6px 2px white);
    }

    #container ::slotted(span) {
      color:red;
      filter: drop-shadow(6px 6px 2px);
    }

    ::slotted(*) {
      border: 3px dashed red;
      margin: 1em var(--leftgutter);
    }

    ::slotted(h1) {
      margin: 0;
      padding-left: var(--leftgutter);
      /* H1{color:black} from parent container has higher Specificity! */
      color:gold;
    }
    ::slotted(.H1)) {
      /* since we can't increase Specificity over H1, only way out is !important */
      color:orange;
    }
    ::slotted(:last-child)::hover {
      color: gold;
      font-weight: bold;
    }
    ::slotted(:not([slot])) {
      font-weight: 0;
    }

    div {
      /* NOT applied to DIVs inside slotted content!*/
      border: 3px dashed greenyellow;
      padding: .5em;
    }
  </style>
  <div id=list>
    <slot name=title></slot>
    <div id=container>
      <slot></slot>
    </div>
  </div>
</template>
<h2>
  slotted content is REFLECTED, not moved (from lightDOM) to shadowDOM SLOTs
</h2>
<my-element>
  <!-- all lightDOM, thus styled by global CSS: -->
  <h1 class=H1 slot=title>Hello Custom Elements World!</h1>
  <div class="heading">Main Heading</div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="heading">Second Heading</div>
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
</my-element>

<script>


class BaseElement extends HTMLElement{
  constructor() {
    super()
      .attachShadow({
        mode: 'open'
      })
     ...

CSS

body {
  font-family:arial;
  --leftgutter: 3em;
}

/* style lightDOM content that gets slotted (REFLFECTED!) to shadowDOM */
my-element div {
  background: lightcoral;
  padding: 1em var(--leftgutter);
}

my-element div.heading{
  background:blue;
  color:white;
}
my-element div:hover {
  background: lightgreen;
}

/* even thought H1 is slotted by NAME, its lightDOM CSS is REFLECTED to the slot*/
.H1 {
  xcolor: black;
}

h1:hover {
  color: red;
}