Web Components & HTML template & HTML slot

https://github.com/xgqfrms/es-next/issues/2

live demo

See the Pen Web Components & HTML template & HTML slot by xgqfrms
(@xgqfrms) on CodePen.

codes

<!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">

                                &lt;<slot name="element-name">NEED NAME</slot>&gt;

                            </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>

class extends

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends

"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);

        }

    }

);

standard DOM & shadow DOM

customElements

https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Web Components

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks

ES6 & class extends

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Using_templates_with_web_components

practical

practice

https://www.htmlelements.com/

https://github.com/HTMLElements

https://hybrids.js.org/

https://github.com/hybridsjs/hybrids

https://www.polymer-project.org/

https://github.com/polymer

https://github.com/Polymer/polymer

https://polymer-library.polymer-project.org/

CSS Pseudo Selectors

::slotted & :empty

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty



/* Selects any element placed inside a slot */

::slotted(*) {

  font-weight: bold;

}

/* Selects any <span> placed inside a slot */

::slotted(span) {

  font-weight: bold;

}

https://css-tricks.com/building-skeleton-screens-css-custom-properties/

You can use the :empty selector and a pseudo element to draw the skeleton, so it only applies to empty card elements.

Once the content is injected, the skeleton screen will automatically disappear.

/* css skeleton */

/*

 * Card Skeleton for Loading

 */

.card {

  width: 280px; //demo

  height: var(--card-height);

  &:empty::after {

    content:"";

    display:block;

    width: 100%;

    height: 100%;

    border-radius:6px;

    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:

      linear-gradient(

        90deg,

        rgba(lightgrey, 0) 0,

        rgba(lightgrey, .8) 50%,

        rgba(lightgrey, 0) 100%

      ),                          //animation blur

      var(--title-skeleton),      //title

      var(--desc-line-skeleton),  //desc1

      var(--desc-line-skeleton),  //desc2

      var(--avatar-skeleton),     //avatar

      var(--footer-skeleton),     //footer bar

      var(--card-skeleton)        //card

    ;

    background-size:

      var(--blur-size),

      var(--title-width) var(--title-height),

      var(--desc-line-1-width) var(--desc-line-height),

      var(--desc-line-2-width) var(--desc-line-height),

      var(--avatar-size) var(--avatar-size),

      100% var(--footer-height),

      100% 100%

    ;

    background-position:

      -150% 0,                      //animation

      var(--title-position),        //title

      var(--desc-line-1-position),  //desc1

      var(--desc-line-2-position),  //desc2

      var(--avatar-position),       //avatar

      var(--footer-position),       //footer bar

      0 0                           //card

    ;

    background-repeat: no-repeat;

    animation: loading 1.5s infinite;

  }

}

@keyframes loading {

  to {

    background-position:

      350% 0,

      var(--title-position),

      var(--desc-line-1-position),

      var(--desc-line-2-position),

      var(--avatar-position),

      var(--footer-position),

      0 0

    ;

  }

}

2020.07

https://caniuse.com/#search=html templates

https://caniuse.com/#search=customElements

web components

https://caniuse.com/#search=web components

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

Web Components & HTML template & HTML slot的更多相关文章

Web Components & HTML5 & template & slot
Web Components & HTML5 & template & slot https://developer.mozilla.org/en-US/docs/Web/HT ...
html fragment & html template & virtual DOM & web components
html fragment & html template & virtual DOM https://developer.mozilla.org/en-US/docs/Web/API ...
The state of Web Components
Web Components have been on developers’ radars for quite some time now. They were first introduced b ...
一个使用 Web Components 的音乐播放器： MelodyPlayer
先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的 ...
学习web components
javascript里的两种组件 1 autonomous custom elements 一般extends HTMLElement, 可以通过<popup-info>或doducmen ...
[HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
HTMLTemplates are part of the web components specification. In this lesson we will learn what are HT ...
Web API之Web Components
本文参考<你的前端框架要被web组件替代了>. 于2011年面世的Web Components是一套功能组件,让开发者可以使用 HTML.CSS 和 JavaScript 创建可复用的组件 ...
Lightning Web Components 组合（五）
使用组合我们可以用来设计复杂的组件. 组合一些比较小的组件,可以增加组件的重新性以及可维护性. 通过以下一个简单的demo,将会展示关于owner 以及container 的概念,在实际的项目中 ex ...
使用CLI 3 创建发布Web Components
本文翻译自:codementor 翻译不当之处,欢迎指正交流 Web Components是web平台的未来吗?关于这一问题支持和反对的观点有很多.事实上浏览器对Web Components的支持正在 ...

随机推荐

Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明：本文为CSDN博主「茶_小哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/ycgslh/article/details/79604074
服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...
像羽毛一样轻的MVVMLight（一）（MVVM 和 MVVMLight简介）
致敬在此致敬翁智华大佬,感谢大佬为后辈们写下如此详细的文档,本文将在原文基础上添加些自己的理解,希望这样优秀的文档广为流传. 原文请参考 https://www.cnblogs.com/wzh201 ...
LOJ10065 北极通讯站
Waterloo University 2002 北极的某区域共有 n 座村庄,每座村庄的坐标用一对整数 (x,,y) 表示.为了加强联系,决定在村庄之间建立通讯网络.通讯工具可以是无线电收发机,也可 ...
存储型XSS
DVWA系列(二)存储型XSS https://www.imooc.com/article/284686 网络安全:存储型XSS https://blog.csdn.net/qq_41500251/a ...
maven pom文件的 name 标签和 url标签到底是什么作用
Spring5源码，@ModelAttribute
一.什么是@ModelAttribute注解二.@ModelAttribute注解相关代码详解一.什么是@ModelAttribute注解 @ModelAttribute注解主要用来将请求转换为使 ...
linux 高可用----keepalived+lvs
什么是高可用? HA(high availability)即高可用性:就是在高可用集群中发生单点故障时,能够自动转移资源并切换服务,以保证服务一直在线的机制. LVS LVS:(linux virtu ...
Flink-v1.12官方网站翻译-P021-State & Fault Tolerance-overview
状态和容错在本节中,您将了解Flink为编写有状态程序提供的API.请看一下Stateful Stream Processing来了解有状态流处理背后的概念. 下一步去哪里? Working wit ...
poj 1410 (没做出来，记得闲着没事看看这道题)
听说这道题是个大大的坑题结果wa了十多发,,,,还是没找到原因 #include<cstdio> #include<cmath> #include<algorithm& ...
Codeforces Round #608 (Div. 2) E. Common Number (二分,构造)
题意:对于一个数\(x\),有函数\(f(x)\),如果它是偶数,则\(x/=2\),否则\(x-=1\),不断重复这个过程,直到\(x-1\),我们记\(x\)到\(1\)的这个过程为\(path( ...

Web Components & HTML template & HTML slot

Web Components & HTML template & HTML slot

class extends

standard DOM & shadow DOM

customElements

Web Components

ES6 & class extends

practical

CSS Pseudo Selectors

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

Web Components & HTML template & HTML slot的更多相关文章

随机推荐

热门专题

Web Components & HTML template & HTML slot

Web Components & HTML template & HTML slot

class extends

standard DOM & shadow DOM

customElements

Web Components

ES6 & class extends

practical

CSS Pseudo Selectors

xgqfrms 2012-2020 www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

Web Components & HTML template & HTML slot的更多相关文章

随机推荐

热门专题

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！