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 {
    static 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>