title: Applying more in depth selection to the :host CSS pseudo class
body: <p>I am making a custom element and have been searching for a way of adding more specificity to the <code>:host</code> pseudo class which is associated with the shadow DOM. From my understanding it is used to select the actual custom element itself. For example, if I had an element called <code>my-elem</code> which had a shadow DOM attached the <code>:host</code> pseudo class would be equivalent to a class under <code>my-elem</code> in a global stylesheet. </p>
  
  <p>From this I wanted to try and further specify the selector so that I could style the custom elements on their state, for example: <code>:host:not(.active)</code>. However, I cannot really find any reading on further specificity regarding the <code>:host</code> and using the aforementioned does not work. </p>
  
  <p>I have also tried the traditional <code>:host.active</code> and even the cheeky <code>:host[active]</code> however none of them work. </p>
  
  <p>So I wanted to ask if this is even possible. I have done some searching online but there doesn't really seem to be all that much online on the matter and I feel that it may not be possible so I will, possibly have to go a level down and apply the active class to the wrapper of the custom element upon state change.</p>
  
  <p>I just wanted to do it this way as it allows me to programatically style the elements from their parent (I am apply the active/inactive styles to custom slides of a custom element form).</p>
  
  <p>Thank you in advance.</p>