Multiply conent for prototyping

A few strategies to «generate» (or rather multiply) content with JS.

repeat() existing content

Just copy/paste the contetn x times.

<div id="grid">
    <div class="item">
         ...
    </div>
</div>

const container = document.getElementById('grid');
container.insertAdjacentHTML('beforeend',container.innerHTML.repeat(3) );

populate <template />

Use template-tags and replace %placeholders% with data.

<template id="exampleTemplate">
    <section>
        <h1>%1%</h1>
        ...
    </section>
</template>

<div id="dynamicContent"></div>

const expandTemplate = (id, data) => {
	const template = document.querySelector(`#${id}`);
	const target = document.querySelector('#dynamicContent');
	
	data.forEach((dataPoint, index) => {
		const instance = document.importNode(template.content, true);
		
		// replace 
		const section = instance.querySelector('section');
		section.innerHTML = section.innerHTML.replace( '%1%', dataPoint ); 

		target.appendChild(instance);
	});

}

expandTemplate( 'exampleTemplate', ['Hello', 'World', 'Data'] );

<custom-HTML-tags /> + <template />

<template id="exampleTemplate">
    <section>
        ...
    </section>
</template>

<custom-section foo="bar"></custom-section>
<custom-section foo="doo"></custom-section>

class CustomSection extends HTMLElement {
    connectedCallback() {
		
        if (this.hasAttribute('foo')) {
            const fooAtt = this.getAttribute('foo');
        }
		
        // use template
        const template = document.querySelector('#exampleTemplate');
        const instance = document.importNode(template.content, true);

        // get content of instance – here the section tag:
        // const section = instance.querySelector('section');
        // do something with section ...

        this.appendChild(instance);
	}
}

customElements.define('custom-section', CustomSection);

per tag style

(whithout shadow dom)

Collect styles from custom attributes and bundle them into a stylesheet.

<custom-section customStyle="background:salmon;color:white;"></custom-section>
<custom-section customStyle="background:rose;color:black;"></custom-section>

// function for appending custom style-sheet
const appendStyle = styles => {
    let css = document.createElement('style');
    css.type = 'text/css';

    if (css.styleSheet){
        css.styleSheet.cssText = styles;
    }else{
        css.appendChild(document.createTextNode(styles));
    } 

    document.getElementsByTagName("head")[0].appendChild(css);
}

let styles="";

class CustomSection extends HTMLElement {
    connectedCallback() {
        // generate random ID
        const randID = Math.ceil(Math.random() * 100000);
        const id = `s-${randID}`;
        
        if(this.hasAttribute('customStyle')) {
            styles += `
                #${id}{ 
                    ${this.getAttribute('customStyle')} 
                }`;
        }

        // append template as in preceding example ... 

    }
}

customElements.define('custom-section', CustomSection);

// append styles
appendStyle(styles);