Web Components: Using React in your Web Components

Using React in your Web Components

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

Related concepts

Using React in your Web Components

Web Components: Using React in your Web Components — Structure map

Clickable & Draggable!

Web Components: Using React in your Web Components — Related pages: