Accessing HTMLElement Setters within React, and loading as customElement?

  dom, getter-setter, javascript, reactjs

For reference, I’m trying to create a custom panel for Home Assistant made in React:

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() {
            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
            Object.defineProperties(this, props)

        disconnectedCallback() {

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

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

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