Web Component Guidelines

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

Scoped 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 this.createScopedElement()

func() {
    let elm = this.createScopedElement('my-panel');
}

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},
        }
    }