Scoped Elements for Polymer

A mixin for Polymer elements based on the Scoped Custom Element Registry proposal

This mixin is inspired by the work of other which targets Lit

• open-wc
• lit

Usage

import { ScopedRegistryMixin } from '@robrez/scoped-registry-polymer';
import { html, PolymerElement } from '@polymer/polymer';

class FancyButton extends HTMLElement {
  /** */
}

export class MyElement extends ScopedRegistryMixin(PolymerElement) {
  static get scopedElements(): ElementDefinitionsMap {
    return {
      'fancy-button': FancyButton
    };
  }

  static get template() {
    return html`
      <div>
        <fancy-button>I am scoped!</fancy-button>
      </div>
    `;
  }
}

Developing

# install deps
npm i

# compile
npm run build

# serve demos
npm run start

# run tests
npm run test

TODO

• Downlevel types
• Nicer docs