Skip to content

Web Component Guidelines

A random selection of guidelines for how we write web components.

Custom Elements

  • All elements which use other custom elements should use ScopedElementsMixin from '@open-wc/scoped-elements' instead of requiring the used custom elements to be globally registered. This avoids the internally used elements to leak and avoids conflicts.

    class MyElement extends ScopedElementsMixin(LitElement) {
        static get scopedElements() {
            return {
                'my-button': MyButton,
                'my-panel': MyPanel,

Instead of document.createElement() when creating nested custom elements use getShadowRootDocument()

import {getShadowRootDocument} from '@dbp-toolkit/common';

func() {
    let elm = getShadowRootDocument(this).createElement('dbp-my-tag');

Internal State

Internal state should be prefixed with a "_" and not provide an attribute by setting state: true:

    static get properties() {
        return {
            _internalThing: {state: true},