Is it possible to modify a custom element / web ponent class after it's been registered? This isn't something I'll typically (or ever) want to do in production code, but when prototyping or implementing a code-patching tool for development, it'd be useful. Here's what I've tried, unsuccessfully, so far:

document.body.appendChild(document.createElement('foo-bar')) // empty element

class FooBar extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar'
  }
}

customElements.define('foo-bar', FooBar) // element shows "foo bar"

FooBar.protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

customElements.get('foo-bar').protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

class FooBar2 extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar 2'
  }
}

customElements.define('foo-bar', FooBar2) // Exception thrown, 'foo-bar' already defined

In summation, modifying the class originally passed to the CustomElementsRegistry has no effect. Assigning to the prototype of what's in the registry has no effect. Attempting to assign a new class to the element in the registry isn't possible as an exception is thrown. All three of these behaviors are counter to my experience with almost every aspect of every other JavaScript API. It's extremely unusual, for better or worse, to not be able to mutate something unless it's set to be non-configurable. However, when I inspect if the objects are configurable, the runtime says they are!

Does anyone know of a way to modify/augment a custom element definition after it's been defined?

Is it possible to modify a custom element / web ponent class after it's been registered? This isn't something I'll typically (or ever) want to do in production code, but when prototyping or implementing a code-patching tool for development, it'd be useful. Here's what I've tried, unsuccessfully, so far:

document.body.appendChild(document.createElement('foo-bar')) // empty element

class FooBar extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar'
  }
}

customElements.define('foo-bar', FooBar) // element shows "foo bar"

FooBar.protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

customElements.get('foo-bar').protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

class FooBar2 extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar 2'
  }
}

customElements.define('foo-bar', FooBar2) // Exception thrown, 'foo-bar' already defined

In summation, modifying the class originally passed to the CustomElementsRegistry has no effect. Assigning to the prototype of what's in the registry has no effect. Attempting to assign a new class to the element in the registry isn't possible as an exception is thrown. All three of these behaviors are counter to my experience with almost every aspect of every other JavaScript API. It's extremely unusual, for better or worse, to not be able to mutate something unless it's set to be non-configurable. However, when I inspect if the objects are configurable, the runtime says they are!

Does anyone know of a way to modify/augment a custom element definition after it's been defined?

• javascript
• html
• dom
• web-ponent
• custom-element

• It seems that customElements.define obtains a reference to the various member functions of the provided class and trying to override those did not work for me. – Intervalia Commented Dec 19, 2017 at 14:43

4 Answers 4

I have implemented a very rough prototype that allows you to customElements.define() CustomElements multiple times. This gives you the flexibility to overwrite any future usages of your custom element.

Modifying an existing class for a CustomElement has the disadvantage, that you would lose the mapping between the actual CustomElement and its actual class and that might be the reason, why it is not possible...

With the above prototype implementation loaded, you can do the following:

// add <foo-bar> to the DOM
// define it once
customElements.define('foo-bar', class extends HTMLElement {
  constructor() { super() };
  connectedCallback() { this.textContent = 'foo bar'; }
}
// ...
// and define it again :)
customElements.define('foo-bar', class extends HTMLElement {
  constructor() { super() };
  connectedCallback() { this.textContent = 'foo bar 2'; }
}
// and add it <foo-bar> again to the DOM to get the new impl

There is no way to change a tag once defined, seems like it pulls in the class when defined.

I have found a way to dynamically reload the code behind a custom element by placing a wrapper class as the constructor, I now have hot reloading on custom elements, no more refreshing apps - the wrapper will need to handle attribute bubbling etc

basically you need to rely on the following pieces

1. knowing what elements are not defined, ideally called whenever you performing changes to the DOM, alternatively you could place a setInterval for development. document.querySelectorAll(':not(:defined)')

2. define the custom element inline so you can use the same constructor for ALL custom elements. customElements.define(elementName, class extends HTMLElement {...

document.querySelectorAll(':not(:defined)').forEach((ele, k) => {
        let elementName = ele.tagName.toLowerCase();
        if (!customElements.get(elementName)) {

            //defining custom element
            customElements.define(elementName, class extends HTMLElement {
                constructor() {
                    super();
                }

                disconnectedCallback() {
                    if (this._elementClass) {
                        this._elementClass.disconnectedCallback()
                    }
                }

                connectedCallback() {

                    let element = (this.tagName).toLowerCase();

                    //reload the class variable here eg: importScript/getScripts 
                    //dependent on whatever variable you want eg: cache id or 
                    //then make calls to the customElement class
                    this._elementClass = new NodeTest(this);
                    this._elementClass.connectedCallback(); 


...


var NodeTest = class {

    constructor(ele) {
        this.ele = ele;
    }

    disconnectedCallback() {

    }

    connectedCallback() {

        this.render();
    }

    render() {
        this.ele.innerHTML = '<h1>hheee</h1>';
    }
}

I think it would be hard to change a behaver of a tag, they(browser developer) might think one tag should only defined once.

I tested to modify shadow root, it worked, If you want to template your custom tag, shadow root will help.

let customTable = document.registerElement('custom-table', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        let shadowRoot = this.createShadowRoot();
        window.shadowRoot = shadowRoot
        let template = document.querySelector('#custom-table');
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    }
  })
});

let i = 0
setInterval(() => {
  shadowRoot.append(`${i++}s past `)
}, 1000)

table {
  height: 100px;
  width: 100px;
  background-color: black;
}

<template id="custom-table">
  <style>
    table {
    }
  </style>
  <table>
    <thead>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>P</td>
        <td>P</td>
        <td>A</td>
        <td>P</td>
      </tr>
    </tbody>
  </table>
</template>
<custom-table></custom-table>
<table>
</table>

Use MVVM is another option, they can also template things, but realtime modify may need manually trigger rerender

• angular (typescript,need pile)
• react (jsx, need pile)
• angular 1.x
• vue

I needed this for hot reloading, I've got to a solution, but it uses clojurescript. In the end the code is piled to javascript, so might be worth to take a look: https://clojureverse/t/hot-reloading-custom-elements-web-ponents/5964