@riotjs/custom-elements

    6.0.0 • Public • Published

    @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

    Install

    npm i @riotjs/custom-elements

    DownloadsWeekly Downloads

    2

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    85.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • gianlucaguarini