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

随机推荐

GraphQL两年实战
https://mp.weixin.qq.com/s/XIQ-0kRhjCe2ubBuhnhlQA
call by value reference name python既不是按值传递也不是按引用传递 python复制原理创建新对象与改变原对象
按名调用 Algol 按值调用 Java https://docs.python.org/3.6/faq/programming.html#how-do-i-write-a-function-with ...
P6584 重拳出击
写在前面来给 zrm 大佬的题写一篇题解. 这题代码实现难度不高,但是比较锻炼思维,而且应该有不少种解法.着实是一道质量很高的题目. 算法思路首先呢,显然当小 Z 向当前节点的一棵子树走去时,这棵 ...
codevs3639
题目描述 Description 给出一棵树,求出树的中心. 为了定义树的中心,首先给每个结点进行标号.对于一个结点K,如果把K从树中删除(连同与它相连的边一起),剩下的被分成了很多块,每一块显然又是 ...
Azure Terraform（八）利用Azure DevOps 实现Infra资源和.NET CORE Web 应用程序的持续集成、持续部署
一,引言上一篇讲解到利用 Azure DevOps 将整个 Azure Web App,Azure Traffic Manager profile,Azure Storage Account,Azu ...
EasyConnect连接成功后，虚拟ip地位未分配
文章目录 #问题描述: 今天公司做项目,连接上EasyConnect以后,显示连接成功,但是虚拟ip地址未分配,导致无法远程连接数据库,以及svn无法更新项目. #解决办法: 百度网上各种解决办法,没 ...
java解压zip压缩包
package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...
canal-adapter1.1.14最新版本安装的过程中出现的NullPointerException异常
记录一下我在安装 canal-adapter1.1.14最新版本安装的过程中出现的NullPointerException异常以下是我的canal-adapter/logs文件夹内adapter.l ...
Deep Learning论文翻译（Nature Deep Review）
原论文出处:https://www.nature.com/articles/nature14539 by Yann LeCun, Yoshua Bengio & Geoffrey Hinton ...
【STM32】时钟
1. 在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL: ① HSI是高速内部时钟,RC振荡器,频率为8MHz: ② HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外部时钟源 ...

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