-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
template & slot #12
Labels
Comments
template & slothttps://codepen.io/xgqfrms/pen/xoWvyL
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<link rel="icon" type="image/png" href="./favicon.png" />
<title>template & slot</title>
<style lang="css">
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>
<section>
<header>
<h1>template & slot</h1>
</header>
<main>
<!-- template -->
<template id="element-details-template">
<style>
details {font-family: "Open Sans Light",Helvetica,Arial}
.name {font-weight: bold; color: #217ac0; font-size: 120%}
h4 { margin: 10px 0 -8px 0; }
h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
h4 span { border: 1px solid #cee9f9; border-radius: 4px }
h4 span { color: white }
.attributes { margin-left: 22px; font-size: 90% }
.attributes p { margin-left: 16px; font-style: italic }
</style>
<details>
<summary>
<span>
<code class="name">
<<slot name="element-name">NEED NAME</slot>>
</code>
<i class="desc">
<slot name="description">NEED DESCRIPTION</slot>
</i>
</span>
</summary>
<div class="attributes">
<h4>
<span>Attributes</span>
</h4>
<slot name="attributes">
<p>None</p>
</slot>
</div>
</details>
<hr>
</template>
<!-- demo -->
<element-details>
<span slot="element-name">slot</span>
<span slot="description">
A placeholder inside a web
component that users can fill with their own markup,
with the effect of composing different DOM trees
together.
</span>
<dl slot="attributes">
<dt>name</dt>
<dd>The name of the slot.</dd>
</dl>
</element-details>
<element-details>
<span slot="element-name">template</span>
<span slot="description">
A mechanism for holding client-
side content that is not to be rendered when a page is
loaded but may subsequently be instantiated during
runtime using JavaScript.
</span>
</element-details>
</main>
</section>
<!-- js -->
<!-- <script src="./app.js"></script> -->
</body>
</html> "use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description app.js
* @augments
* @example
* @link
*
*/
let log = console.log;
customElements.define("element-details",
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("element-details-template").content;
// log(`element-details's template =`, template);
let dom = template.cloneNode(true);
// log(`element-details's template's dom =`, dom);
// log(`this =`, this);
const shadowRoot = this.attachShadow({mode: "open"}).appendChild(dom);
// log(`shadowRoot =`, shadowRoot);
}
}
); |
Web Components All In OneHTML Template |
1 similar comment
Web Components All In OneHTML Template |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
template & slot
The text was updated successfully, but these errors were encountered: