ES6 & class extends All In One

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

"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);
        }
    }
);

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description app.js
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

// customElements.define(name, constructor, options);

class ElementDetails 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);
    }
}

customElements.define("element-details-2", ElementDetails);
// customElements.define("element-details-2", ElementDetails, {});

---

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

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
    ;
  }
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---