Adapter

Intro

Setup
▸

CSS like OOP 🔥
▸

Component Isolation

Mixins & APIs

Scoped Style

Style Filtering

Style Filtering

Style Filtering is a useful technique for filtering or bypassing styles from other components are used inside the container component. As a result, we can effortlessly mix and match or isolate styles between components.

Filter out & Bypass

Link

This component filter out (revert) <button> style

Link
JS
import { Adapter } from '@devcapsule/adapter';

class FilterButton extends Adapter {
  // Use ES2022 static block syntax
  static { this.css = `
    & button { all: revert }
    & button:hover { all: revert };
  `};
}

FilterButton.define('el-filter-button');
HTML
<button>Button</button> <a href="#">Link</a>

<el-filter-button>
  This component filter out (revert) `<button>` style

  <div class="width-100">
    <button>Button</button>
    <a href="#">Link</a>
  </div>
</el-filter-button>