HTML Custom Element or Tag Example

<!DOCTYPE html>
<html>
<head>
<title>How to Create Custom HTML Tags or Elemnts?</title>
<script>
	class addNote extends HTMLElement {
	constructor () {
		/* call constructor at beginning */
		super();

		/* Shadow DOM elements */
		this._wrap = document.createElement("div");     
		this._text = document.createElement("span");
		this._wrap.appendChild(this._text);

		/* Add CSS Styles */
		this._styles = document.createElement("style");
		this._styles.textContent = `
		div {
		padding: 20px; 
		font-size: 20px;
		background: #f8f9fa;
		color: #153966;
		border-radius: 10px;
		border-left: 10px solid #153966;
		box-shadow: 0 0 2px #000;
		}`;

		/* Attach CSS styles to Shadow DOM */
		this._shadow = this.attachShadow({mode: "open"});
		this._shadow.appendChild(this._styles);
		this._shadow.appendChild(this._wrap);
	}

	/* Add attributes functionality */
	static get observedAttributes () { return ["text"]; }
	attributeChangedCallback (name, oldVal, newVal) {
		/* Add attribute behaviour */
		if (name=="text") { this._text.innerHTML = newVal; }
	}

	/* Callbacks (Optional) */
	/* (C1) On Addition to DOM
	connectedCallback() { console.log("Connected"); }

	/* (C2) On Removal from DOM */
	disconnectedCallback() { console.log("Disconnected"); }

	/* (C3) On Adoption in DOM */
	adoptedCallback() { console.log("Adopted"); }
}	
/* Register Custom Element */
customElements.define("add-note", addNote);
</script>
</head>
<body>
<h1>HTML Custom Tags or Elements</h1>
<p>The <a href="https://www.tutsinsider.com/javascript/" target="_blank" rel="noopener">JavaScript</a> method is used to <a href="https://www.tutsinsider.com/html/html-custom-tags/" target="_blank" rel="noopener">create Custom HTML tags</a>.</p>
<p>The javascript code is used to register HTML custom tag (add-note).Use this tag to create notes in your web page.</p>
<add-note text="Hi this is a note. Add your notes using this custom tag."></add-note>
<br />
<add-note text="This is another note."></add-note>
</body>
</html>