如何在Web Components中正確使用布林型別屬性
寫在前面
雖然所有 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,但按照慣例,布林屬性應該使用空字串。 -
同樣重要的是要認識到字串
true
和false
對於 HTML 屬性沒有專門的含義,將布林屬性設定為true
或false
將使布林屬性為true
。 -
沒有明確的方法將布林屬性設定為
false
,必須將其刪除。getAttribute
為不存在的屬性返回 null,但不能setAttribute('open', null)
,這將導致open="null"
被視為true
。
以上是本次分享的所有內容,希望對大家有幫助,謝謝~
- 重磅!哈囉 Quark Design 正式開源,下一代跨技術棧前端元件庫
- Sentinel叢集限流原理及TokenServer使用注意事項
- 記錄一次ElasticSearch的查詢效能優化
- CSS單位em在Web Components中的妙用
- 如何在Web Components中正確使用布林型別屬性
- 哈囉前端Web Components最佳實踐
- 淺析Web components的痛點
- 淺析Web components的痛點
- 有關 npm 包的本地開發和除錯
- 【編譯篇】AST實現函式錯誤的自動上報
- React 17 更新一覽
- 來,跟我一起 ,自研多端錯誤監控平臺(完整版)
- 不喜歡 Vue Cli?那就自己搭建一個吧