::part伪元素使用示意实例页面

展示

代码

• HTML：

  <square-img src="./1.jpg" alt="注意圆角和背景色"></square-img>

• JS：

  class SquareImg 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;
        img.setAttribute('part', 'img');
        var span = document.createElement('span');
        span.setAttribute('part', 'span');
        span.textContent = this.getAttribute('alt') || '';
        var style = document.createElement('style');
        style.textContent = `:host {
        display: inline-block;
        position: relative;
    }
    :host-context(.cs-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;
    }`;
        shadow.append(style, span, img);
      }
    }
    // 定义square-img自定义元素
    customElements.define('square-img', SquareImg);

• CSS代码：

  square-img::part(img) {
      border-radius: 40% 40% 0 0;
  }
  square-img::part(span) {
      background-color: #cd0000;
  }