:host, :host(), :host-context() only works in the context of a shadow root, you can't use it outside of shadow DOM.
/* โญ๏ธ select host element (from inside shadow DOM) */:host {/* โญ๏ธ by default, custom elements are `display: inline` */display:block;/* CSS containment */contain:content; }:host {opacity:0.4;will-change:opacity;transition:opacity 300ms ease-in-out;}/* โญ๏ธ :host(<selector>) โญ๏ธ ----------------- target the host if it matches a <selector>. */:host(:hover) {opacity:1;}:host([disabled]) { /* style when host has disabled attribute. */background:grey;pointer-events:none;opacity:0.4;}:host(.blue) {color:blue; /* color host when it has class="blue" */}:host(.pink) >#tabs {color:pink; /* color internal #tabs node when host has class="pink". */}
<body class="darktheme"> <fancy-tabs> ... </fancy-tabs></body>/* โญ๏ธ :host-context(<selector>) โญ๏ธ ------------------------- select host if it or any of its ancestors matches <selector>.*/:host-context(.darktheme) {color:white;background:black;}
/* โญ๏ธ won't select text node placed into slot (only elements)*//* selects any element placed inside a slot */::slotted(*) {font-weight:bold;}/* selects any <span> placed inside a slot */::slotted(span) {font-weight:bold;}