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/

  1. 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的更多相关文章

  1. Web Components & HTML5 & template & slot

    Web Components & HTML5 & template & slot https://developer.mozilla.org/en-US/docs/Web/HT ...

  2. html fragment & html template & virtual DOM & web components

    html fragment & html template & virtual DOM https://developer.mozilla.org/en-US/docs/Web/API ...

  3. The state of Web Components

    Web Components have been on developers’ radars for quite some time now. They were first introduced b ...

  4. 一个使用 Web Components 的音乐播放器： MelodyPlayer

    先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的 ...

  5. 学习web components

    javascript里的两种组件 1 autonomous custom elements 一般extends HTMLElement, 可以通过<popup-info>或doducmen ...

  6. [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 ...

  7. Web API之Web Components

    本文参考<你的前端框架要被web组件替代了>. 于2011年面世的Web Components是一套功能组件,让开发者可以使用 HTML.CSS 和 JavaScript 创建可复用的组件 ...

  8. Lightning Web Components 组合（五）

    使用组合我们可以用来设计复杂的组件. 组合一些比较小的组件,可以增加组件的重新性以及可维护性. 通过以下一个简单的demo,将会展示关于owner 以及container 的概念,在实际的项目中 ex ...

  9. 使用CLI 3 创建发布Web Components

    本文翻译自:codementor 翻译不当之处,欢迎指正交流 Web Components是web平台的未来吗?关于这一问题支持和反对的观点有很多.事实上浏览器对Web Components的支持正在 ...

随机推荐

  1. 外观模式（Facade） Adapter及Proxy 设计模式之间的关系 flume 云服务商多个sdk的操作 face

    小结: 1. 外观模式/门面模式 Facade  往是多个类或其它程序单元,通过重新组合各类及程序单元,对外提供统一的接口/界面. Proxy(代理)注重在为Client-Subject提供一个访问的 ...

  2. （四）Springboot以jar包方式启动、关闭、重启脚本

    Springboot以jar包方式启动.关闭.重启脚本 1.启动 2.关闭 3.重启 4.脚本授权 SpringBoot: nohup java -jar zlkj-data-server-1.0-S ...

  3. linux shell判断文件,目录是否存在或者具有权限

    在linux中判断文件,目录是否存在或则具有的权限,根据最近的学习以及网上的资料,进行了以下的总结: #!/bin/sh myPath="/var/log/httpd/" myFi ...

  4. centos6.5安装KVM，并在KVM中安装虚拟6.5系统

    =============================环境搭建================================================== 1.检查CPU信息 KVM 需要 ...

  5. idea中将普通工程设置为maven项目

    只需要在工程上右键,"Add Frameworks support...",然后选择Maven即可

  6. Java并发包源码学习系列：阻塞队列实现之LinkedTransferQueue源码解析

    目录 LinkedTransferQueue概述 TransferQueue 类图结构及重要字段 Node节点 前置:xfer方法的定义 队列操作三大类 插入元素put.add.offer 获取元素t ...

  7. Java JDBC 模糊查询 避免输入_，%返回全部数据

    Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...

  8. Pytest（9）skip跳过用例

    前言 pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能 Skip和xfail: 处理那些不会成功的测试用例 你可以对那些在某些特定平台上不能运行的测试用 ...

  9. shell脚本的使用该熟练起来了，你说呢？（篇二）

    继续前一篇的文章: shell脚本的使用该熟练起来了,你说呢?(篇一) 作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:羽林君 shell传递参数 shell传递参数 我们可以在执行 Shell ...

  10. EF6.2加载速度慢的解决方案

    最近的项目中一直有反馈,EF在第一次启动之后调用的话,加载速度很慢,在网上搜索了一下,基本就是三种解决方案. 在程序启动的时候将映射视图缓存下来. 使用Ngen生成EF的本地镜像. IIS8内置功能 ...