@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!
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