-
Notifications
You must be signed in to change notification settings - Fork 0
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 #83
Labels
template & slot
template & slot
Comments
<!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);
}
}
); |
Repository owner
locked and limited conversation to collaborators
Jul 3, 2019
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
template & slot
https://codepen.io/xgqfrms/pen/xoWvyL
The text was updated successfully, but these errors were encountered: