溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用Web組件自定義元素

發(fā)布時(shí)間：2022-08-23 16:28:45 來(lái)源：億速云 閱讀：163 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“怎么使用Web組件自定義元素”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用Web組件自定義元素”文章能幫助大家解決問(wèn)題。

Web組件使用

名稱規(guī)范

  • 在定義它們時(shí)必須使用至少兩個(gè)單詞和一個(gè)連字符

  • 必須小寫

  • 自定義元素不能自閉合

class UserCard extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('user-card', UserCard);

組件傳參數(shù)并可以寫模板包括js和css

組件的樣式應(yīng)該與代碼封裝在一起，只對(duì)自定義元素生效，不影響外部的全局樣式，:host偽類，指代自定義元素本身

<html>
    <head></head>
    <body>
        <user-card name="Marty Mcfly"></user-card>
        <template id="userCardTemplate">
          <div class="profile-picture">
            <img src="marty.png" alt="Marty Mcfly" />
          </div>
          <div class="name"></div>
          <style>
           :host {
             display: flex;
             align-items: center;
             width: 450px;
             height: 180px;
             background-color: #d4d4d4;
             border: 1px solid #d5d5d5;
             box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
             border-radius: 3px;
             overflow: hidden;
             padding: 10px;
             box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
           }
           .image {
             flex: 0 0 auto;
             width: 160px;
             height: 160px;
             vertical-align: middle;
             border-radius: 5px;
           }
        </style>
        </template>
        <script>
            class UserCard extends HTMLElement {
              constructor() {
                super();
                var templateElem = document.getElementById('userCardTemplate');
                var content = templateElem.content.cloneNode(true);
                // 使用name參數(shù)
                content.querySelector('.container>.name').innerText = this.getAttribute('name');
                this.appendChild(content);
              }
            }
            window.customElements.define('user-card', UserCard);    
        </script>
    </body>
</html>

Shadow Dom 影子節(jié)點(diǎn)

  • 沒(méi)有開(kāi)啟Shadow Dom 前template的內(nèi)容會(huì)直接append到user-card節(jié)點(diǎn)上

  • 開(kāi)啟Shadow Dom后，template和user-card中間多了一個(gè)節(jié)點(diǎn)叫shadowRoot

  • attachShadow 的mode參數(shù)有 open 和 closed 兩個(gè)不同參數(shù)，區(qū)別是open時(shí)，外部能訪問(wèn)內(nèi)部節(jié)點(diǎn)，closed時(shí)完全隔離

  • attachShadow 是大多數(shù)標(biāo)簽都支持的，比如 div，p，selection，但是a，ul，li等不支持

<script>
    class UserCard extends HTMLElement {
      constructor() {
        super();
        var shadow = this.attachShadow( { mode: 'closed' } );   /******這行開(kāi)啟shadow*****/
        var templateElem = document.getElementById('userCardTemplate');
        var content = templateElem.content.cloneNode(true);
        // 使用name參數(shù)
        content.querySelector('.container>.name').innerText = this.getAttribute('name');
        shadow.appendChild(content);         /******這行template添加到shadow*****/
      }
    }
    window.customElements.define('user-card', UserCard);    
</script>

類中的構(gòu)造函數(shù)和鉤子函數(shù)

class UserCard extends HTMLElement {
  // attributeChangedCallback 能監(jiān)聽(tīng)的屬性
  static get observedAttributes() {return ['name', 'url']; }
  constructor() {
    super();
    // 可以創(chuàng)Shadom，通過(guò)this.shadowRoot獲取
    // this.attachShadow({ mode: 'open' })
  }
  connectedCallback (){
      console.log('鉤子，元素append到ducument觸發(fā)')
  }
  disconnectedCallback (){
      console.log('鉤子，元素從document刪除觸發(fā)')
  }
  // 只有observedAttributes 中監(jiān)聽(tīng)的屬性name,url變化會(huì)觸發(fā)下面回調(diào)
  attributeChangedCallback (attr, oldVal, newVal){
      console.log('鉤子，元素屬性改變時(shí)觸發(fā)')
  }
}
window.customElements.define('user-card', UserCard);
姓名何時(shí)調(diào)用
constructor元素的一個(gè)實(shí)例被創(chuàng)建。對(duì)于初始化狀態(tài)、設(shè)置事件監(jiān)聽(tīng)器或創(chuàng)建shadow Dom。
connectedCallback每次將元素插入 DOM 時(shí)調(diào)用。一般主要工作代碼寫在這里。
disconnectedCallback每次從 DOM 中刪除元素時(shí)調(diào)用。一般寫清理的一些代碼。
attributeChangedCallback(attrName, oldVal, newVal)觀察屬性在添加、刪除、更新、替換時(shí)被調(diào)用。只有屬性中列出的observedAttributes屬性才會(huì)收到此回調(diào)。
adoptedCallback自定義元素已被移動(dòng)到一個(gè)新的document（例如有人稱為document.adoptNode(el)）。

getter/setter屬性和屬性反射

html中attribute 和 類中property 是各自獨(dú)立，想要建立映射需要手動(dòng)設(shè)置

getter和setter生效

<html>
  <head></head>
  <body>
    <user-card id="usercard" name="Marty"></user-card>
    <script>
      class UserCard extends HTMLElement {
        _name = null;
        constructor() {
          super();
        }
        set name(value) {
          this._name = name;
        }
        get name() {
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

測(cè)試

document.getElementById('usercard').name = 'jack'  // 會(huì)進(jìn)入setter
document.getElementById('usercard').name  // 會(huì)進(jìn)入getter，返回jack
document.getElementById('usercard').getAttribute('name')  // 不會(huì)進(jìn)入getter，返回Marty
document.getElementById('usercard').setAttribute('name','bob')  // 不會(huì)進(jìn)入setter
document.getElementById('usercard').getAttribute('name')  // 不會(huì)進(jìn)入getter，返回bob

此時(shí)，我們看到 setAttribute 和 gettAttribute 都不會(huì)觸發(fā)類中的 getter 和 setter 方法，但是可以看到如果是 .name 這樣的方式可以觸發(fā) ,那么改造方式如下：

方式一 重寫 setAttribute ：

<html>
  <head></head>
  <body>
    <user-card id="usercard" name="Marty"></user-card>
    <user-card id="uc" name="Marty Mcfly"></user-card>
    <script>
      const rawSetAttribute = Element.prototype.setAttribute;
      class UserCard extends HTMLElement {
        _name = null;
        constructor() {
          super();
          Element.prototype.setAttribute = function setAttribute(key, value) {
            // 特定的指定name
            if (key == "name") {
              this.name = value; // 這樣就能觸發(fā) setter
            }
            rawSetAttribute.call(this, key, value);
          };
        }
        set name(value) {
          debugger;
          this._name = name;
        }
        get name() {
          debugger;
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

方式二 重寫 observedAttributes和attributeChangedCallback 監(jiān)聽(tīng) name ：

<html>
  <head></head>
  <body>
    <user-card id="uc" name="Marty Mcfly"></user-card>
    <script>
      class UserCard extends HTMLElement {
        static get observedAttributes() {
          return ["name"];
        }
        _name = null;
        constructor() {
          super();
        }
        attributeChangedCallback(attr, _oldVal, newVal) {
          if (attr == "name") {
            this.name = newVal;
          }
        }
        set name(value) {
          debugger;
          this._name = name;
        }
        get name() {
          debugger;
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

由此，可以看到組件在頁(yè)面渲染時(shí)會(huì)進(jìn)入setter方法，而且 setAttribute，getAttribute 均進(jìn)入到setter方法

document.getElementById('usercard').setAttribute('name','bob')  // 會(huì)進(jìn)入setter
document.getElementById('usercard').getAttribute('name')  // 會(huì)進(jìn)入getter，返回bob

擴(kuò)展原生 HTML

假設(shè)您想創(chuàng)建一個(gè)更高級(jí)的<button>. 與其復(fù)制<button>的行為和功能，更好的選擇是使用自定義元素逐步增強(qiáng)現(xiàn)有元素。

  • 擴(kuò)展現(xiàn)有元素的主要好處是獲得其所有特性（DOM 屬性、方法、可訪問(wèn)性）。

  • Safari瀏覽器兼容性待提高

  • 要擴(kuò)展一個(gè)元素，您需要?jiǎng)?chuàng)建一個(gè)繼承自正確 DOM 接口的類定義。前面例子都是繼承HTMLElement，現(xiàn)在更多繼承例如，按鈕HTMLButtonElement,圖片HTMLImageElement

class FancyButton extends HTMLButtonElement {
    constructor() {
        super(); 
        this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
    }
    drawRipple(x, y) {
        let div = document.createElement('div');
        div.classList.add('ripple');
        this.appendChild(div);
        div.style.top = `${y - div.clientHeight/2}px`;
        div.style.left = `${x - div.clientWidth/2}px`;
        div.style.backgroundColor = 'currentColor';
        div.classList.add('run');
        div.addEventListener('transitionend', e => div.remove());
    }
}
customElements.define('fancy-button', FancyButton, {extends: 'button'});

注意：擴(kuò)展基礎(chǔ)元素時(shí)，對(duì)的調(diào)用 define() 略有變化。必需的第三個(gè)參數(shù)告訴瀏覽器您正在擴(kuò)展哪個(gè)標(biāo)簽

  • 調(diào)用方式一：

<button is="fancy-button" disabled>Fancy button!</button>

  • 調(diào)用方式二：

let button = document.createElement('button', {is: 'fancy-button'});
button.textContent = 'Fancy button!';
button.disabled = true;
document.body.appendChild(button);

  • 調(diào)用范式三

let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

關(guān)于“怎么使用Web組件自定義元素”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

web
AI
助
手