Adapter

Intro

Setup
▸

CSS like OOP 🔥
▸

Component Isolation

Mixins & APIs

Scoped Style

Style Filtering

CSS like OOP !

Componente Style (Class Style)

Class Level Styling will affect all elements created from class with a defined tagName. The result CSS will be rendered like..

css
el-tagname {
  /* styles */
}

There are 3 APIs to do this as following description.

ℹ️ The reason to have many ways to style is to make it flexible to manage your components and styles in separated files or modules.

1. Class Declaration Styling

The component can be styled while declaring the component class by setting in static css property. This is the most common way to style your components.

JS
import { Adapter } from 'https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm';

class Card extends Adapter {};
Adapter.css = `
  display: inline-flex;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 5px;
  padding: 1rem;
`;
Card.define('el-card');
HTML
<el-card>This is a card</el-card>

Result :

This is a card

2. Setting static css property

Component can be styled later by setting static css. This will replace all styles for this component (not affect inherit styles).

This example also show how component can be extended and inherit parent class style.

JS
/** BlueCard inherit CSS from Card */
class BlueCard extends Card {};

BlueCard.css = `
  background-color: blue;
  color: white;
`;

/** It also works with native customElement.define() */
customElements.define('el-bluecard', BlueCard);
HTML
<el-bluecard>This is a blue card</el-bluecard>

Result :

This is a blue card

3. Using function static addStyle(css: string)

Using addStyle() will add more CSS style to the component (Not replacing it).

JS
BlueCard.addStyle(`
  &.largeFont {
      font-size: 2em;
  }
`);
HTML
<el-bluecard class="largeFont">This is a blue card with large font</el-bluecard>

Result :

This is a blue card with large font

Element Style (Object Style)

Element Object Styling will render CSS with the auto-generated unique class selector, much like the following code.

el-card.predefine.class.and.autogen { /* style */ }

This way, the style will be very specific to an element, but with a bit lower priority than inline style. There are 2 APIs to style component object (element) with the same manner as Class / Component Styling

1. Setting css property

This will replace component object styles, but not affect Class / Component Styles

JS
document.querySelector('el-bluecard#blue-card-lift').css = `
    filter: drop-shadow(10px 10px 10px #444);
`;
HTML
<el-bluecard id="blue-card-lift">Lift me up</el-bluecard>

Result :

Lift me up

2. Using addStyle(css: string)

This will add more style to component object (element).

JS
document.querySelector('#blue-card-rotate').addStyle(`
    transform: rotate(45deg);
`);
HTML
<el-bluecard id="blue-card-rotate">Rotate me</el-bluecard>

Result :

Rotate me

Style inside Shadow DOM just works !!

Most of the time, styling the DOM with Adapter will cover everything you need to program CSS in an object-oriented manner. However, if you are seeking complete control and isolation for your components, Shadow DOM is the way to go.

Thanks to adoptedStyleSheets, Adapter can use it as the proper way to automatically style element when attached inside a Shadow DOM.

JS
class ShadowHost extends Adapter {
  constructor() {
    super();
    const innerHTML = this.innerHTML;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = innerHTML;
  }
}

customElements.define('el-shadow-host', ShadowHost);
HTML
<el-shadow-host>
    <el-bluecard>This card is in Shadow DOM</el-bluecard>
</el-shadow-host>

Result :

This card is in Shadow DOM