superwf / web-components-example

web components example for React and Vue

Web Component Example

use web component to share function in React and Vue

exmpale customElement name is share-component

must register first by customElements.

global.customElements.define('share-component', ShareComponent)

Raw HTML

<share-component sku="8477015" />

React

In React, self defined component is capitalized, so lower case tag name could be use directly as raw element.

<share-component sku="8477015" />

Vue

must tell vue this element tag is already defined

Vue.config.ignoreElements = ['share-component']

then in .vue file template

<share-component sku="8477015" />

NOTICE

Can NOT be used in IE AND EDGE.

Reference

shadowdom web components

Usage

yarn
yarn start