:host()伪类使用示意实例页面

展示

代码

• HTML：

  <square-img src="./1.jpg" size="200" alt="直角头像"></square-img>
  <square-img src="./1.jpg" size="200" alt="圆角头像" radius></square-img>

• JS：

  class HTMLSquareImgElement extends HTMLElement {
    constructor() {
      super();
  
      var shadow = this.attachShadow({
          mode: 'open'
      });
  
      // 创建图片、提示元素以及样式
      var img = document.createElement('img');
      img.src = this.getAttribute('src');
      img.width = img.height = this.getAttribute('size') || 150;
      var span = document.createElement('span');
      span.textContent = this.getAttribute('alt') || '';
      var style = document.createElement('style');
      style.textContent = `
  // 见剥离的CSS代码    
  `;
      shadow.append(style, span, img);
    }
  }
  // 定义square-img自定义元素
  customElements.define('square-img', HTMLSquareImgElement);

• CSS剥离示意：

  :host {
      display: inline-block;
      position: relative;
  }
  :host([radius]) {
      border-radius: 50%;
      overflow: hidden;
  }
  span:not(:empty) {
      position: absolute;
      background-color: rgba(0,0,0,.5);
      left: 0; right: 0; bottom: 0;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 24px;
  }
  img {
      display: block;
      object-fit: cover;
  }