create shadow dom example

src/app.component.ts

@@ -9,6 +9,7 @@ class App extends HTMLElement {
 			<nav>Navegação</nav>
 			<h1>Título APP</h1>
 			<app-example></app-example>
+			<app-shadow-example></app-shadow-example>
 			<footer>Rodapé</footer>
 		`;
 	}

src/components/example/example.component.html

@@ -1,5 +1,10 @@
 <section>
 	<article>
-		<h1>This is an example</h1>
+		<h1>This is a component example</h1>
+
+		<ul>
+			<li>This is an item inside component example</li>
+			<li>This is other item inside component example</li>
+		</ul>
 	</article>
 </section>

src/components/example/example.component.scss

@@ -1,3 +1,7 @@
+.example-component section {
+	background-color: beige;
+}
+
 .example-component h1 {
 	color: brown;
 }

src/components/shadow-example/shadow-example.component.html

@@ -0,0 +1,26 @@
+<section>
+	<article>
+		<h1>This is a Shadow DOM Component example</h1>
+		<ul id="container"></ul>
+	</article>
+</section>
+
+<template id="template-item">
+	<li id="text-p"></li>
+</template>
+
+<style>
+	section {
+		background-color: gainsboro;
+		padding: 10px;
+	}
+
+	h1 {
+		color: green;
+	}
+
+	ul {
+		color: blue;
+		list-style-type: square;
+	}
+</style>

src/components/shadow-example/shadow-example.component.ts

@@ -0,0 +1,41 @@
+import html from './shadow-example.component.html';
+
+class ShadowExampleComponent extends HTMLElement {
+	private container: HTMLDivElement | undefined;
+	private templateItem: HTMLTemplateElement | undefined;
+	private texts = [
+		'This is the first item.',
+		'The second item is before the third. And the third will be a lorem ipsum.',
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet porta velit, vel gravida mi sodales in. Duis ultricies sem a urna convallis, at ultrices nunc facilisis. Proin volutpat enim eget dolor aliquet, a semper mauris tincidunt. Sed fringilla mauris ut tortor interdum vehicula nec a sem. Duis non justo dapibus, dignissim est a, posuere nibh. Maecenas nibh lectus, auctor eget pulvinar ac, viverra ac lacus. Aliquam sed nulla sit amet est viverra pharetra quis eget tortor. Aliquam fringilla elit vitae lectus fringilla laoreet. Praesent ut mi eget libero maximus viverra. Fusce id justo non dolor euismod ullamcorper. Aenean a ante id elit auctor condimentum ac et enim. Praesent et ante iaculis, mollis tortor molestie, malesuada nunc. Donec quis ex tincidunt, vulputate felis sit amet, efficitur arcu. Nulla augue sem, lobortis a nunc ac, congue volutpat odio.',
+	];
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		const template = document.createElement('template');
+		template.innerHTML = html;
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot?.appendChild(template.content.cloneNode(true));
+
+		this.container = this.shadowRoot?.getElementById(
+			'container'
+		) as HTMLDivElement;
+		this.templateItem = this.shadowRoot?.getElementById(
+			'template-item'
+		) as HTMLTemplateElement;
+		for (const text of this.texts) {
+			const item = this.templateItem.content.cloneNode(
+				true
+			) as DocumentFragment;
+			const p = item.getElementById('text-p');
+			if (p) {
+				p.innerHTML = text;
+			}
+			this.container.appendChild(item);
+		}
+	}
+}
+
+customElements.define('app-shadow-example', ShadowExampleComponent);

src/index.ts

@@ -1,2 +1,3 @@
 import './app.component';
 import './components/example/example.component';
+import './components/shadow-example/shadow-example.component';

typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+	const content: any;
+	export default content;
+}