Skip to content
Simple API to create vanilla custom elements with riot
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc updated: use the riot API insead of the simple dom bindings Mar 3, 2019
.gitignore First commit Dec 18, 2018
.travis.yml First commit Dec 18, 2018
LICENSE First commit Dec 18, 2018
README.md updated: documentation May 30, 2019
index.next.js updated: documentation May 30, 2019
karma.conf.js First commit Dec 18, 2018
package-lock.json updated: beta release Mar 9, 2019
package.json updated: release bump May 30, 2019
rollup.config.js First commit Dec 18, 2018
test.js updated: documentation May 30, 2019

README.md

@riotjs/custom-elements

Simple API to create vanilla custom elements with riot

This module is highly experimental and it's not meant to be used in production yet!

🚧🚧🚧

Build Status

NPM version NPM downloads MIT License

Demos

Usage

import MyComponent from './my-component.riot'
import define from '@riotjs/custom-elements'

define('x-tag', MyComponent)

Notice that in order to update the component properties via attribute you will need to rely on the observedAttributes array

<my-component>
  <p>{props.message}</p>
  <script>
    export default {
      // the message property will be automatically updated anytime the DOM `message` attribute will change
      observedAttributes: ['message']
    }
  </script>
</my-component>

API

This module exports only a single factory function that is a wrapper around the native customElements.define. The define function accepts only 3 parameters:

  • tag name
  • tag api normally generated via riot compiler
  • custom options to pass to customElements.define like {extends: 'button'} for example
You can’t perform that action at this time.