A toolkit for making Polymer simpler.

Usage no npm install needed!

<script type="module">
  import polymerToolkit from 'https://cdn.skypack.dev/polymer-toolkit';


:wrench: polymer-toolkit

A toolkit for making Polymer simpler.

Provides already:

  • Redux support
  • A decorator to register your components
  • A decorator to close the shadow DOM
  • One to open the shadow DOM
  • Others tools not yet released...

Install it

# With npm
npm install --save polymer-toolkit

# With yarn
yarn add -ED polymer-toolkit

How to use ?

import { register, ReduxLitElement } from "polymer-toolkit";
import { createStore } from "redux";

const exampleStore = createStore(/*Put a reducer*/);

// It registers your component in the shadow DOM.
// Same as: customElements.define("my-component", MyComponent);
// But it is way prettier !

// It closes the shadow DOM.

// It opens the shadow DOM.
class MyComponent extends ReduxLitElement {
    // Put the name of your component.
    // Could be a getter.
    static displayName = "my-component";

    // Put your store here.
    store = exampleStore;
    // Then put a mapStateToProps,
    // It assigns your store state to your component's props.
    // Same as in "react-redux".
    mapStateToProps = state => {
        return {
            someProps: state.someState
    // Finally, put a mapDispatchToProps,
    // It assigns your store actions to your component's props.
    // Same as in "react-redux".
    mapDispatchToProps = dispatch => {
        return {
            // Inside your component, your can call it like this: this.addANumber(7);
            addANumber: (n) => dispatch({
                type: ADD_A_NUMBER,
                payload: n

    static get properties() {
        return {
            someProps: Object // Put the type of your state.
            addANumber: Function