For reference, I’m trying to create a custom panel for Home Assistant made in React: https://developers.home-assistant.io/docs/frontend/custom-ui/creating-custom-panels/

Accessing HTMLElement Setters

Is there a way to access the HTML Setters within React itself? At the moment, I am storing the data in the setters and then passing this to a React Element. The problem with this though is every time the Setter is called, it re-render my entire React app. Not ideal.

This is how its currently done:

import React from 'react'
import ReactDOM from 'react-dom'

// Small helper function to generate custom elements that will render the passed
// in React component and forwards the Home Assistant panel properties.
export default (ReactPanel) =>
    class extends HTMLElement {
        constructor() {
            super()
            this._renderScheduled = null

            // Initialize properties as `null` and create setters that triggers a render
            const props = {}
            ;['hass', 'showMenu', 'narrow', 'panel'].forEach((prop) => {
                const key = `_${prop}`
                this[key] = null
                props[prop] = {
                    set(value) {
                        this[key] = value
                        this._render()
                    },
                }
            })
            Object.defineProperties(this, props)
        }

        disconnectedCallback() {
            ReactDOM.unmountComponentAtNode(this)
        }

        _render() {
            if (this._renderScheduled !== null) return

            this._renderScheduled = Promise.resolve().then(() => {
                this._renderScheduled = null
                ReactDOM.render(
                    React.createElement(ReactPanel, {
                        hass: this._hass,
                        showMenu: this._showMenu,
                        narrow: this._narrow,
                        panel: this._panel,
                    }),
                    this
                )
            })
        }
    }

Does anyone know a way I can get the data from these Setters from within my React App itself? This way I can handle them internally without causing the entire app to re-render like it currently does with the code above

Pass React App to customElement.define()

If I achieve the above, how can I go about loading this app into customElement.define()?

Source: Ask Javascript Questions