GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - riot/custom-elements: Simple API to create vanilla custom elements with riot

BranchesTags
Open more actions menu

Latest commit

 

History

62 Commits
62 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
src
src
 
 
.gitignore
.gitignore
 
 
.prettierrc.js
.prettierrc.js
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
eslint.config.js
eslint.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
rollup.config.js
rollup.config.js
 
 
test.e2e.js
test.e2e.js
 
 
test.html
test.html
 
 
test.js
test.js
 
 
wdio.conf.js
wdio.conf.js
 
 

Repository files navigation

@riotjs/custom-elements

Riot.js custom elements logo

Simple API to create vanilla custom elements with riot

Build Status NPM version NPM downloads MIT License

Demos

  • Simple Demo

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

About

Simple API to create vanilla custom elements with riot

Resources

Readme
MIT license
Activity
Custom properties

Stars

40 stars

Watchers

4 watching

Forks

4 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.