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

Discovering the magic of obtaining a random element in Vue.js

What is the best way to create a distinct key for the key prop in my map function within a React component?

Automatically trigger the expansion of all panels within Vuetify using code

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Pause the counter based on the data attribute containing multiple values

Guide on transferring Vue form input data to Adonis controller through an http request

Achieving secure HTTPS connection with socket.io

Navigate to a specific element using Selenium WebDriver in Java

How to Use Jquery to Perform Subtraction on Elements

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Determine the dropdown list value by analyzing the final two variables in a textfield

Guide to building a react-redux application with a Node server as the backend

Unable to dynamically load a component into page.tsx within Next.js

Arranging an array containing three elements

Stop the Sidebar from showing up on certain pages with Next.js

Why does the value of my input get erased when I add a new child element?

Utilizing jQuery to implement a function on every individual row within a table

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

What are the possible reasons for a checkbox not being checked in React JS?

Avoid positioning issues when dropping a DIV onto the Canvas