web_components.js

custom_component.js

import React from 'react';
import { mountNode } from 'foremanReact/common/MountingService';

/**
 * This tag can be used for mounting one react component from ComponentRegistry
 * This way, we would decide to rewrite the mounter completely and we would make all components there to the custom tags.
 */
class ComponentInRegistryElement extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.appendChild(mountPoint);
    const props = JSON.parse(this.dataset.props);

    mountNode('ComponentInRegistry', mountPoint, props);
  }
};

window.customElements.define('one-component-per-tag', ComponentInRegistryElement);

global_one_component.js

import React from 'react';
import { mountNode } from './common/MountingService';

/**
 * This tag can be used for mounting all components in react ComponentRegistry
 */
class ReactComponentElement extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.appendChild(mountPoint);
    const componentNameFromRegistry = this.dataset.name;
    const props = JSON.parse(this.dataset.props);

    mountNode(componentNameFromRegistry, mountPoint, props);
  }
};

window.customElements.define('react-component', ReactComponentElement);

usage.html

<!-- and the cool part we mount the react component just as easily -->

<one-component-per-tag props="{'json':'props'}"></one-component-per-tag>

<!-- Any component -->
<react-component name="ComponentInRegistry" props="{'json':'props'}"></react-component>