1. <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info>

    组件定义和使用，js部分

    1. class PopUpInfo extends HTMLElement {
    2.   constructor() {
    3.     // Always call super first in constructor
    4.     super();
    6.     // Create a shadow root
    7.     const shadow = this.attachShadow({mode: 'open'});
    9.     // Create spans
    10.     const wrapper = document.createElement('span');
    11.     wrapper.setAttribute('class', 'wrapper');
    13.     const icon = document.createElement('span');
    14.     icon.setAttribute('class', 'icon');
    15.     icon.setAttribute('tabindex', 0);
    17.     const info = document.createElement('span');
    18.     info.setAttribute('class', 'info');
    20.     // Take attribute content and put it inside the info span
    21.     const text = this.getAttribute('data-text');
    22.     info.textContent = text;
    24.     // Insert icon
    25.     let imgUrl;
    26.     if(this.hasAttribute('img')) {
    27.       imgUrl = this.getAttribute('img');
    28.     } else {
    29.       imgUrl = 'img/default.png';
    30.     }
    32.     const img = document.createElement('img');
    33.     img.src = imgUrl;
    34.     icon.appendChild(img);
    36.     // Create some CSS to apply to the shadow dom
    37.     const style = document.createElement('style');
    38.     console.log(style.isConnected);
    40.     style.textContent = `
    41.       .wrapper {
    42.         position: relative;
    43.       }
    44.       .info {
    45.         font-size: 0.8rem;
    46.         width: 200px;
    47.         display: inline-block;
    48.         border: 1px solid black;
    49.         padding: 10px;
    50.         background: white;
    51.         border-radius: 10px;
    52.         opacity: 0;
    53.         transition: 0.6s all;
    54.         position: absolute;
    55.         bottom: 20px;
    56.         left: 10px;
    57.         z-index: 3;
    58.       }
    59.       img {
    60.         width: 1.2rem;
    61.       }
    62.       .icon:hover + .info, .icon:focus + .info {
    63.         opacity: 1;
    64.       }
    65.     `;
    67.     // Attach the created elements to the shadow dom
    68.     shadow.appendChild(style);
    69.     console.log(style.isConnected);
    70.     shadow.appendChild(wrapper);
    71.     wrapper.appendChild(icon);
    72.     wrapper.appendChild(info);
    73.     //外部css的方式，由于不会阻塞渲染，可能会导致一瞬间空白样式
    74.     const linkElem = document.createElement('link');
    75.     linkElem.setAttribute('rel', 'stylesheet');
    76.     linkElem.setAttribute('href', 'style.css');
    77.     shadow.appendChild(linkElem);
    78.   }
    79. }
    81. // Define the new element
    82. customElements.define('popup-info', PopUpInfo);

    ;host是整个shadowRoot popup-info的样式
    :host()选择包含使用这段 CSS 的Shadow DOM的影子宿主，括号里是父元素的选择器
    https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

    1. //https://github.com/mdn/web-components-examples/tree/master/host-selectors
    2. let style = document.createElement('style');
    3. const shadowRoot = this.attachShadow({mode: 'open'});
    4. shadowRoot.appendChild(style);
    5. style.textContent = 'span:hover { text-decoration: underline; }' +
    6.                     ':host-context(h1) { font-style: italic; }' +
    7.                     ':host-context(h1):after { content: " - no links in headers!" }' +
    8.                     ':host-context(article, aside) { color: gray; }' +
    9.                     ':host(.footer) { color : red; }' +
    10.                     ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
    • connectedCallback：当 custom element首次被插入文档DOM时，被调用。
    • disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
    • adoptedCallback：当 custom element被移动到新的文档时，被调用。
    • attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。

    需要注意的是，如果需要在元素属性变化后，触发 attributeChangedCallback()回调函数，你必须监听这个属性。这可以通过定义observedAttributes() get函数来实现，observedAttributes()函数体内包含一个 return语句，返回一个数组，包含了需要监听的属性名称：
    static get observedAttributes() {return [‘w’, ‘l’]; }