kmoskwiak/app.js

## app.js
class MyCustomElement {
    constructor(id) {
        let html = this.getHtml(id);
        let temporaryContainer = document.createElement('div');
        temporaryContainer.innerHTML = html.trim();
        this.element = temporaryContainer.firstChild;
    }

    getElement() {
        return this.element;
    }

    getHtml(id) {
        return `
            <div id="${id}">
                <h1>Hello!</h1>
            </div>
        `;
    }
}


const container = document.getElementById('container');
const myElement = new MyCustomElement('asd-123');
container.appendChild(myElement.getElement());

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="container"></div>
    <script src="app.js"></script>
</body>
</html>
	class MyCustomElement {
	constructor(id) {
	let html = this.getHtml(id);
	let temporaryContainer = document.createElement('div');
	temporaryContainer.innerHTML = html.trim();
	this.element = temporaryContainer.firstChild;
	}

	getElement() {
	return this.element;
	}

	getHtml(id) {
	return `
	<div id="${id}">
	<h1>Hello!</h1>
	</div>
	`;
	}
	}


	const container = document.getElementById('container');
	const myElement = new MyCustomElement('asd-123');
	container.appendChild(myElement.getElement());
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="author" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div id="container"></div>
	<script src="app.js"></script>
	</body>
	</html>