如何在Web Components中正確使用布林型別屬性

語言: CN / TW / HK

寫在前面

雖然所有 HTML 屬性都是字串,但由於 HTML 是純文字格式,當你在書寫自定義元件的時候可能會經常遇到布林屬性(boolean attributes),那麼如何正確使用布林屬性呢?本文來講解一二。

篇幅較小,沒有使用/書寫過 Web Components 的同學可以跳過本文,想要了解的可以參考前面寫過的文章: 哈囉前端Web Components最佳實踐

相關的文章還有: 關於自定義元件屬性在 Vue 和 React 中不同表現的探討

宣告 Boolean attributes

自定義元素上不存在布林屬性——當人們談論它們時,他們指的是一個簡單的約定:如果一個屬性存在於一個元素上,那麼它是真的,而如果一個屬性不存在於一個元素上,那麼它就是錯誤的: ```

```

設定 Boolean attributes

1、如果需要設定屬性為 true: ``` const el = document.querySelector('my-component');

el.setAttribute('open', ''); / setting an empty string will set the attribute with no value on the element / ```

2、如果需要設定屬性為 false: el.removeAttribute('open');

3、讀取布林屬性: const isOpen = el.hasAttribute('open');

需要注意的幾個點

  • 可以看到,當使用 hasAttribute 時,不需要將屬性設定為空字串,將屬性設定為任何值都將返回 true,但按照慣例,布林屬性應該使用空字串

  • 同樣重要的是要認識到字串 truefalse 對於 HTML 屬性沒有專門的含義,將布林屬性設定為truefalse 將使布林屬性為 true

  • 沒有明確的方法將布林屬性設定為 false,必須將其刪除。 getAttribute 為不存在的屬性返回 null,但不能 setAttribute('open', null),這將導致 open="null" 被視為 true

以上是本次分享的所有內容,希望對大家有幫助,謝謝~