StyledComponent

The StyledComponent mixin enables Web Components to pull in style rules, making customisation simpler.

Usage

Extending from StyledComponent in JavaScript

           
import {StyledComponent} from 'accessible-web-components';
 
class DropdownSelector extends StyledComponent(HTMLElement) {
  constructor() {
    super()
      .attachShadow({mode: 'open'})
      .innerHTML = `<div></div>`;
 
     // other initialisation
  }
 
  connectedCallback() {
    if (this.isConnected) {
      super.connectedCallback();
 
    // other initialisation requiring access to DOM and ShadowDOM
  }
 
  disconnectedCallback() {
    super.disconnectedCallback();
 
    // other cleanup
  }
}       

CSS Selectors

           
<dropdown-selector id="target-by-id" class="pretty-selector">
</dropdown-selector>       

           
dropdown-selector {
  background-color: gray;
}
 
.pretty-selector {
  border: 1px solid firebrick;
}
 
#target-by-id {
  font-size: 2rem;
}       

Style rules targeting the element, class or ID of a StyledComponent will be applied to the root element of the Web Component, maintaining the same specificity as the original rule.