标签归档：Components

Web Components 真正的浏览器组件

1. 简单的页面结构 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="main.js"></script>
</head>
<body>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
  <my-img></my-img>
</body>
</html>

2. 简单的自定义浏览器组件 Web Components 感觉一下它的魅力 main.js

class myImg extends HTMLElement {
  constructor() {
    super();
    // 创建一个影子根节点
    const shadow = this.attachShadow({
      mode: 'open'
    });
    // 创建一个DIV
    const wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    // 创建一个span
    const span = document.createElement('span');
    span.innerText = 'hello world';
    // 创建一个图片
    let imgUrl = 'https://img.hnquxing.com/information_flow/2020-08-17%2F983269d64b91cc6f348873eef144f71c.jpg';
    const img = document.createElement('img');
    img.src = imgUrl;
    const style = document.createElement('style');
    style.textContent = `
      .wrapper {
        position: relative;
      }
      span{
        display:block;
        position: absolute;
        left:0;
        top:0;
        color:#fff;
        background: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 12rem;
        opacity: 0.5;
        transition: all 600ms;
      }
      img:hover + span{
           background: rgba(0, 0, 0, 1);
      }
      img:hover {
        opacity: 1;
      }
    `;
    wrapper.appendChild(img);
    wrapper.appendChild(span)
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// 自定义的元素名
customElements.define('my-img', myImg);

浏览效果：WebComponents