spwanelement

spawnElement(v1.0.2)

The spawnElement npm package is a powerful tool for simplifying the creation of reusable web components in vanilla JavaScript. It provides developers with a straightforward way to define and encapsulate custom elements, making it easier to build modular and maintainable web applications. With spawnElement, you can encapsulate your HTML, JavaScript, and CSS into a single, self-contained component, ensuring that it remains isolated from the rest of your codebase. This package streamlines the process of creating custom elements, helping developers save time and effort while adhering to best practices in web development. By promoting reusability and encapsulation, spawnElement facilitates cleaner and more maintainable code, ultimately enhancing the efficiency of web development projects.

Usage:

usage of the module

<script type="module">
   import spawnElement from './spawnelement.js';

	// Retrieve the template HTML and styles
	const templateHTML = document.querySelector("#component").innerHTML;
	const styleTag = document.querySelector("style");
	const styles = styleTag.textContent;

	// Use the spawnElement function to create the custom element
	spawnElement("my-component", templateHTML, styles);

 </script>

here is how you can use to make a component

<template id="component">
    <div>
        <h1>hello world</h1>
    </div> 
</template>
<style>
    h1 {
        font-size: 2rem;
    } 
</style>
<script type="module">
   import spawnElement from './spawnelement.js';

	// Retrieve the template HTML and styles
	const templateHTML = document.querySelector("#component").innerHTML;
	const styleTag = document.querySelector("style");
	const styles = styleTag.textContent;

	// Use the spawnElement function to create the custom element
	spawnElement("my-component", templateHTML, styles);

 </script>