dna

Evolution-based components.

Styles

Many components need to be stylized, of course. The best practice is to use a scoped set of CSS rules, but cross-browser native support for ShadowDOM is lacking and polyfills are heavy. StyleMixin is a sort of temporary alternative (we hope to remove this mixin once the ShadowDOM support is stable) which adds a scoping CSS class to the component and transpiles ShadowDOM CSS rules.

import { BaseComponent, DOM, define } from '@dnajs/core';

class MyComponent extends BaseComponent {
    get css() {
        return `
            :host {
                display: block;
            }

            p {
                color red;
            }
        `;
    }
}

define('my-component', MyComponent);

let elem = new MyComponent();
DOM.appendChild(document.body, elem);

will generate:

<style id="style-my-component">
    .my-component {
        display: block;
    }
    .my-component p {
        color: red;
    }
</style>
<my-component class="my-component"></my-component>

Supported ShadowDOM CSS rules

*selector*

All CSS selectors are prefixed with the scoping class (p {} => .scoping-class p {}).

:host

It refers to the component root.

:host(*selector*)

Adds a state rule, for example :host([active]) refers to the component with the active attribute, or :host(.state-active) refers to the component with CSS class state-active.

This strategy does not handle sub-components tree scoping, so parent component rules affect sub-components elements. Where the all property is supported, you can use this rule: * { all: unset }, otherwise you need to manually reset properties for sub-components elements.

For this reason, a good practice could be to use a BEM-like strategy for CSS rules.