Styles API

Web Components and the Shadow DOM

As described in the Getting Started section, the Embedded Web Directory is a Web Component. Web components allow developers to create reusable, framework agnostic UI components.

Usually, web components use the Shadow DOM, and so does the Embedded Web Directory! This provides encapsulation for the CSS of the component so that styles from the rest of the page should not have any effect inside the component and vice-versa.

Overview

The Styles API exposed by the Embedded Web Directory uses CSS Custom Properties allowing customisation of the default styles. The API is simple to use - just use the CSS element selector to select the web component and provide the CSS values or variables for each of the custom properties as required. A brief example of this is shown below, full available settings are in the Styles API reference.

<!-- Public API styles -->
<style>
  wf-app {
    --font-family-primary: monospace;
    --primary-colour: #ff5733;
    --border-width: 5px;
  }
</style>

Styles API

The Embedded Web Directory exposes an API to customise various aspects of the CSS styling. This section details this API and its default styles.

Web Components and the Shadow DOM

Overview