Javascript: Insert a class declaration post loading of the page

Question

Javascript: Insert a class declaration post loading of the page

When working with native web components, it is necessary to be able to add class definitions after the page has loaded, especially when new types of components are dynamically added to the DOM.

EDIT: Here's a brief explanation:

In order to define web components, you use a class like this:

customElements.define('my-new-tag', myNewtagClass);

;

Therefore, if you want to introduce a new type of component into the DOM, its corresponding class must be defined. It seems that you cannot programmatically define a global class, as it needs to be defined within the root document/scope.

As of now, the only Pure JavaScript solution I could find is to create the class as a string and insert it using a script in the head of the document.

However, this means having to write the class in this format:

let myClassString = `
class myClass {
  ....
}`;
const sc = document.createElement('script');
sc.setAttribute('type', 'text/javascript');
sc.innerHTML = myClassString;
window.document.head.appendChild(sc);

Unfortunately, this method isn't very practical in most IDEs...

Is there a way to automate this process during the build (considering I use TypeScript and webpack)?

For instance, can I extract the class from a file where it's normally defined and utilize it as a variable elsewhere?

javascript class npm build web-component

Answer 1

Answer №1

I am perplexed by the intention behind creating a class with a string

Below is some code I extracted from my components;
dynamically generating classes/methods/Web Components

<script>
  console.clear();
  const createElement = (tag, props) => Object.assign(document.createElement(tag), props);
  class BaseClass extends HTMLElement {
    constructor(name = null) {
      super();
      this.name = name;
    }
    connectedCallback() {
      this.hello();
    }
  }
  const createClass = (extendFrom, ...args) => {
    class Klass extends extendFrom {
      constructor() {
        super(...args);
      }
    }
    Object.assign(Klass.prototype, {
      ["hello"] : function() {
        this.innerHTML = `Hello from <b>${this.name}!</b><br>`;
      }    
    });
    return Klass
  }
  const createComponent = (name, defaultClass = BaseClass) => {
    customElements.define(name, createClass(defaultClass, name));
    document.body.append(createElement(name, {
      title: name,
    }))
  }
  document.onclick = () => {
    let count = document.body.querySelectorAll("[title]").length + 1;
    createComponent("new-component" + count);
  }
  createComponent("my-comp1");
  createComponent("my-comp2");
</script>
click document!<br>

Answer 2

I am perplexed by the intention behind creating a class with a string

Below is some code I extracted from my components;
dynamically generating classes/methods/Web Components

<script>
  console.clear();
  const createElement = (tag, props) => Object.assign(document.createElement(tag), props);
  class BaseClass extends HTMLElement {
    constructor(name = null) {
      super();
      this.name = name;
    }
    connectedCallback() {
      this.hello();
    }
  }
  const createClass = (extendFrom, ...args) => {
    class Klass extends extendFrom {
      constructor() {
        super(...args);
      }
    }
    Object.assign(Klass.prototype, {
      ["hello"] : function() {
        this.innerHTML = `Hello from <b>${this.name}!</b><br>`;
      }    
    });
    return Klass
  }
  const createComponent = (name, defaultClass = BaseClass) => {
    customElements.define(name, createClass(defaultClass, name));
    document.body.append(createElement(name, {
      title: name,
    }))
  }
  document.onclick = () => {
    let count = document.body.querySelectorAll("[title]").length + 1;
    createComponent("new-component" + count);
  }
  createComponent("my-comp1");
  createComponent("my-comp2");
</script>
click document!<br>

Javascript: Insert a class declaration post loading of the page

Answer №1

Similar questions

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

I am unable to halt the relentless stream of asynchronous events

Servlet question: What causes the XMLHttpRequest responseText to consistently appear empty?

Error: AppModule requires an array of arguments in order to function properly

Encountering EAGAIN error while running npm install within a Jenkins build process alongside Maven

Loop through the JSON data and dynamically display corresponding HTML code based on the data

Utilize AJAX to retrieve the output of a PHP randomizer

I am looking to modify the appearance of specific sections of a searched word in React.js, such as making them bold or lighter. Can anyone

Tips for confirming that one of three checkboxes has been selected in AngularJS

What is the best way to access an Ajax response outside of its function using JQuery?

Having trouble receiving the response from PHP after making an AJAX request

Extract information from JSON using a filter

How can I gather information from members who have already signed up?

What strategies can be implemented to minimize the use of if-else statements?

Problem with Java class in GWT JsInterop

Vue's v-for loop updates all input fields instead of just one, ensuring consistency across the board

What are the steps to accessing validation errors using express-validator?

Addressing the issue of Google Charts legends overlapping

What is the solution to adding values from a counter?

JQuery .click function functioning properly on alternate clicks