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

    ;

  }

}