https://github.com/riot/custom-elements

Simple API to create vanilla custom elements with riot
https://github.com/riot/custom-elements

Last synced: about 2 months ago
JSON representation

Simple API to create vanilla custom elements with riot

• Host: GitHub
• URL: https://github.com/riot/custom-elements
• Owner: riot
• License: mit
• Created: 2018-12-18T19:55:26.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-12-01T23:17:58.000Z (about 1 year ago)
• Last Synced: 2024-05-03T13:54:04.955Z (8 months ago)
• Language: JavaScript
• Size: 812 KB
• Stars: 34
• Watchers: 6
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-components - @riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js. (Libraries / Integrations)

README

        
# @riotjs/custom-elements

[![Riot.js custom elements logo](https://raw.githubusercontent.com/riot/branding/main/custom-elements/custom-elements-horizontal.svg)](https://github.com/riot/custom-elements/)

Simple API to create vanilla custom elements with riot

[![Build Status][ci-image]][ci-url]

[![NPM version][npm-version-image]][npm-url]

[![NPM downloads][npm-downloads-image]][npm-url]

[![MIT License][license-image]][license-url]

## Demos

- [Simple Demo](https://codesandbox.io/p/sandbox/riot-custom-elements-demo-forked-xqw2sq)

## Usage

```js

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`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) array

```html

  
{props.message}

  

    export default {

      // the message property will be automatically updated anytime the DOM `message` attribute will change

      observedAttributes: ['message']

    }

  


```

[ci-image]:https://img.shields.io/github/actions/workflow/status/riot/custom-elements/test.yml?style=flat-square

[ci-url]:https://github.com/riot/custom-elements/actions

[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square

[license-url]:LICENSE

[npm-version-image]:http://img.shields.io/npm/v/@riotjs/custom-elements.svg?style=flat-square

[npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/custom-elements.svg?style=flat-square

[npm-url]:https://npmjs.org/package/@riotjs/custom-elements

## 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