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的支持正在 ...

随机推荐

AutoMapper 10.0使用教程
这里有个目录什么是AutoMapper 配置使用MapperConfiguration配置使用Profile Instances配置 Naming Conventions(命名约定) Repla ...
Python学习【第2篇】：循环
For循环 pass while 循环 pass 练习题: 1.使用while循环输入 1 2 3 4 5 6 8 9 10,不输出7 n = 1while n< 11: if n == ...
MySQL索引的原理，B+树、聚集索引和二级索引
MySQL索引的原理,B+树.聚集索引和二级索引的结构分析一.索引类型 1.1 B树 1.2 B+树 1.3 哈希索引 1.4 聚集索引(clusterd index) 1.5 二级索引(secon ...
用友GRP-u8 SQL注入
POST /Proxy HTTP/1.1 Accept: Accept: */* Content-Type: application/x-www-form-urlencoded User-Agent: ...
36.Samba 文件共享服务1--安装及配置参数解释
1.Samba 服务程序现在已经成为在Linux 系统与Windows系统之间共享文件的最佳选择. 1)安装: [root@localhost ~]#yum install samba Loaded ...
DolphinScheduler1.3.2源码分析（二）搭建源码环境以及启动项目
前置依赖组件安装找一台服务器,或者本地的虚拟机,然后在服务器上安装好jdk,zookeeper,mysql. 1.源码调试环境搭建源码环境搭建可以参考DolphinScheduler官方网站的开发 ...
Python: 捕获正在运行的CMD窗口内容
最近需要捕获已经在运行的CMD窗口内容,并且需要根据指定输出内容来判断下一步的行动(输入指定内容). 尝试了很多次后,想到一个思路: 通过inspect.exe来获取CMD窗口Name信息通过uiau ...
解析一下C++的异常处理
作者:良知犹存转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN 总述在程序运行过程中经常会碰到一些问题,例如数组下标越界,除数为零等,这些错误不过能被发现处理, ...
D - Seek the Name, Seek the Fame
The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the l ...
C++快读
写在前面: 一个小专题完全非原创,不知道原来是谁提出的诈尸 http://thepingaslord.deviantart.com/art/The-Evening-Prior-312446336 ...

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 发布文章使用：只允许注册用户才可以访问！