custom-attributes

Define custom attributes in the same way you can define custom elements, which allows for rich mixin types of behaviors on elements.

Install

npm install custom-attributes --save

<script src="node_modules/custom-attributes/attr.js" defer></script>

Example

<article bg-color="green">
  <p>This will be shown in a green background!</p>
</article>

class BgColor {
  connectedCallback() {
    this.setColor();
  }

  disconnectedCallback() {
    // cleanup here!
  }

  // Called whenever the attribute's value changes
  changedCallback() {
    this.setColor();
  }

  setColor() {
    this.ownerElement.style.backgroundColor = this.value;
  }
}

customAttributes.define('bg-color', BgColor);

License

BSD 2 Clause