Accessible Web Components

StyledComponent

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

Usage

Extending from StyledComponent in JavaScript

           
import {StyleComponent} from 'accessible-web-components';
 
class DropdownSelector extends StyleComponent(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.