mirror of
https://github.com/swc-project/swc.git
synced 2024-12-21 20:51:42 +03:00
41 lines
1.1 KiB
HTML
41 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>element-details - web component using <template> and <slot></title>
|
|
<style>
|
|
dl { margin-left: 6px; }
|
|
dt { font-weight: bold; color: #217ac0; font-size: 110% }
|
|
dt { font-family: Consolas, "Liberation Mono", Courier }
|
|
dd { margin-left: 16px }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>element-details - web component using <code><template></code> and <code><slot></code></h1>
|
|
|
|
<template id="element-details-template-1">
|
|
VALUE: !<slot>?</slot>!
|
|
</template>
|
|
|
|
<element-details>
|
|
<span>test</span> <span>foo</span>
|
|
</element-details>
|
|
|
|
|
|
<script>
|
|
customElements.define('element-details',
|
|
class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const template = document
|
|
.getElementById('element-details-template-1')
|
|
.content;
|
|
const shadowRoot = this.attachShadow({mode: 'open'})
|
|
.appendChild(template.cloneNode(true));
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|