34 lines
996 B
TypeScript
34 lines
996 B
TypeScript
import './style.css'
|
|
import typescriptLogo from './typescript.svg'
|
|
|
|
class EmbeddedNode extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
const shadow = this.attachShadow({mode: 'open'})
|
|
shadow.innerHTML = '<div>This is an Embedded Node</div>'
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
|
|
<div>
|
|
<a href="https://vitejs.dev" target="_blank">
|
|
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
</a>
|
|
<a href="https://www.typescriptlang.org/" target="_blank">
|
|
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
|
|
</a>
|
|
<h1>Vite + TypeScript</h1>
|
|
<div class="card">
|
|
<embedded-node></embedded-node>
|
|
<embedded-node>Some Content Here</embedded-node>
|
|
</div>
|
|
<p class="read-the-docs">
|
|
Click on the Vite and TypeScript logos to learn more
|
|
</p>
|
|
</div>
|
|
`
|
|
window.customElements.define('embedded-node', EmbeddedNode)
|
|
|
|
})
|