Angular学习笔记第9天-Angular 元素（Elements）

Xie Steven

.NET 6 / C# / UWP

联系作者

江苏无锡

Timeline

2021年01月(5)

2021年02月(4)

2021年03月(6)

2021年04月(1)

2021年05月(1)

2021年06月(1)

2022年07月(4)

2022年08月(3)

2022年09月(1)

2024年04月(1)

**Angular 元素（Elements）概览**

在Angular里，我们在开发的时候经常会添加一个组件，组件里有构造类文件，有样式，有选择器，有模板文件(.HTML).而模板文件里面的内容其实就是我们都知道的一些普通的HTML元素。

那么，每次我们编译生成后在浏览器里运行起来，这些组件又都被渲染成了普通的HTML元素。这中间涉及到一个叫做[自定义元素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)的概念。自定义元素是一套与具体框架无关的用于定义新 HTML 元素的 Web 标准。有了这个标准，Angular每次都会把我们的组件打包成符合这个标准的自定义元素，因此那些浏览器才能正确的将我们的自定义组件渲染成普通的HTML元素。

这里如果对自定义元素还是感觉无法理解，觉得很抽样，建议你去看下MDN Web Docs上的[自定义元素](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements)原文。上面讲了两种自定义元素 `Autonomous custom elements`(自主自定义元素) 和 `Customized built-in elements`(内置自定义元素)。自主自定义元素其实就是我们平常在Angular里创建的组件，而内置自定义元素，我觉得像是对已有的HTML元素进行了扩展。类似于子类对父类的某些功能进行重写。

对于`Autonomous custom elements`，我也是跟着文档上的例子建了个js文件和html文件进行了测试，我的总结就是，`Autonomous custom elements` 其实就是自己创建一个类，在类里按照文档上告诉我们的规则，将类继承自 `HTMLElement`, 并在构造函数里 `必须首先调用 super方法`，然后就是你调用基础的js代码，创建一些基础的HTML元素，并用javascript代码实现一些基础的逻辑，最后将这些用代码创建的HTML元素组合起来，让他看起来像是一个整体。

**最后，我们使用之前提到的define()方法将 custom element注册到CustomElementRegistry上。**

>customElements.define('popup-info', PopUpInfo); 这行代码很重要，不要就没法实现自定义元素了噢。

下面是我自己测试案例，给大家参考：

本地新建一个 customElements 文件夹：一个customElement.js文件和一个index.HTML文件。

```javascript
// Create a class for the element
class PopUpInfo extends HTMLElement {
    constructor() {
      // Always call super first in constructor
      super();
  
      // Create a shadow root
      const shadow = this.attachShadow({mode: 'open'});
  
      // Create spans
      const wrapper = document.createElement('span');
      wrapper.setAttribute('class', 'wrapper');
  
      const icon = document.createElement('span');
      icon.setAttribute('class', 'icon');
      icon.setAttribute('tabindex', 0);
  
      const info = document.createElement('span');
      info.setAttribute('class', 'info');
  
      // Take attribute content and put it inside the info span
      const text = this.getAttribute('data-text');
      info.textContent = text;
  
      // Insert icon
      let imgUrl;
      if(this.hasAttribute('img')) {
        imgUrl = this.getAttribute('img');
        
      } else {
        imgUrl = 'img/default.png';
        
      }
  
      const img = document.createElement('img');
      img.src = imgUrl;
      icon.appendChild(img);
  
      // Create some CSS to apply to the shadow dom
      const style = document.createElement('style');
      console.log(style.isConnected);
  
      style.textContent = `
        .wrapper {
          position: relative;
        }
        .info {
          font-size: 0.8rem;
          width: 200px;
          display: inline-block;
          border: 1px solid black;
          padding: 10px;
          background: white;
          border-radius: 10px;
          opacity: 0;
          transition: 0.6s all;
          position: absolute;
          bottom: 20px;
          left: 10px;
          z-index: 3;
        }
        img {
          width: 100px;
        }
        .icon:hover + .info, .icon:focus + .info {
          opacity: 1;
        }
      `;
  
      // Attach the created elements to the shadow dom
      shadow.appendChild(style);
      console.log(style.isConnected);
      shadow.appendChild(wrapper);
      wrapper.appendChild(icon);
      wrapper.appendChild(info);
    }
  }
  
  // Define the new element
  customElements.define('popup-info', PopUpInfo);
```

```html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pop-up info box — web components</title>
    <script src="customElement.js" defer></script>
  </head>
  <body>
    <h1>Pop-up info widget - web components</h1>

<form>
      <div>
        <label for="cvc">Enter your CVC <popup-info img="https://angular.cn/assets/images/logos/angular/logo-nav@2x.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></label>
        <input type="text" id="cvc">
      </div>
    </form>

</body>
</html>
```