xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Web Components & HTML template & HTML slot

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

live demo

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 {
   280px; //demo
  height: var(--card-height);

  &:empty::after {
    content:"";
    display:block;
     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
    ;
  }
}