Implementation of Web Component Wrapper for React

[StfBauer]

General Information

• [ ] Usage
• [ ] Development
• [ ] Documentation
• [x] Feature Request

Describe your Request

Add support for web components to ReactJS to projects: https://reactjs.org/docs/web-components.html

[petkir]

What's your vision behind? web components can be made with react / angular / plain javascript

[StfBauer]

@petkir haven't looked into it but if you like to look into you are more than welcome. The only web components-ish implementation are currently VueJS or Angular Elements.

[petkir]

Angular Elements is really comfortable for developers. I have only written my own wrapper for React Components.

class MyReactWrapper extends HTMLElement {
  reactMountPoint;
  componentAttributes = {};
  connectedCallback() {
    this.mountReactApp();
  }
  disconnectedCallback() {
    ReactDOM.unmountComponentAtNode(this.reactMountPoint);
  }
  static get observedAttributes() {
    return ['prop1', 'prop2'];
  }
  attributeChangedCallback(name, oldVal, newVal) {
    this.componentAttributes[name] = newVal;
    this.mountReactApp();
  }
  mountReactApp() {
    if (!this.reactMountPoint) {
      this.mountPoint = document.createElement('div');
      this.attachShadow({ mode: 'open' }).appendChild(this.reactMountPoint);
    }
    ReactDOM.render(<MyReact { ...this.componentAttributes } />, this.reactMountPoint);
  }
}
window.customElements.define('my-react', MyReactWrapper);

Eg.: https://github.com/LukasBombach/react-web-component

But the Main Source in SPfx is written in React what's the use case:

• include React Web-Components in React
• include React Web-Components in Angular or Vue (Maybe for Office UI )