docs: update issue 353

archives/2024/353.md

@@ -3,7 +3,7 @@ title: uni-app 记录
 number: '#353'
 link: 'https://github.com/toFrankie/blog/issues/353'
 created_at: '2024-12-10 09:52:31'
-updated_at: '2025-02-27 10:43:22'
+updated_at: '2025-02-28 17:27:15'
 labels:
   - 小程序
   - '2024'
@@ -74,11 +74,35 @@ labels:
 
 在微信小程序端有两种做法：
 
-1. 拿到子组件实例，然后再父组件内使用 `uni.createSelectorQuery.in(subComponentInstance).select('.the-descendant')` 获取元素。
-2. 使用 [>>>](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html#selector-%E8%AF%AD%E6%B3%95)（跨自定义组件的后代选择器），在父元素内使用 `uni.createSelectorQuery().select('.the-ancestor >>> .the-descendant')` 获取其子（子子...）组件内的元素。
+1. 拿到子组件实例，然后再父组件内使用 `uni.createSelectorQuery.in(subComponentInstance).select('.descendant')` 获取元素。
+2. 使用 [>>>](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html#selector-%E8%AF%AD%E6%B3%95)（跨自定义组件的后代选择器），在父元素内使用 `uni.createSelectorQuery().select('.ancestor >>> .descendant')` 获取其子（子子...）组件内的元素。
 
-而 App 端，编译后的 HTML 结构跟小程序不一样，小程序带有一个 ShadowRoot 节点隔离，而 App 端不会。因此使用 `uni.createSelectorQuery().select('.the-ancestor .the-descendant')` 直接查询到后代的元素。而且 [App 端不支持 >>> 语法](https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-select)，它是小程序特有的。
+而 App 端，编译后的 HTML 结构跟小程序不一样，小程序带有一个 ShadowRoot 节点隔离，而 App 端不会。因此使用 `uni.createSelectorQuery().select('.ancestor .descendant')` 直接查询到后代的元素。而且 [App 端不支持 >>> 语法](https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-select)，它是小程序特有的。
 
+### 布尔 dataset
 
-继续补充...
+在 HTML 中有一种[布尔类型的属性](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)。
+
+```html
+<!-- attr is true -->
+<div attr></div>
+<div attr=""></div>
+<div attr="false"></div>
+<div attr="any value"></div>
+
+<!-- attr is false -->
+<div></div>
+```
+
+如果要将某个属性变为 false，只能 `removeAttribute('attr')`。对于 `setAttribute('attr', undefined)` 等均是无效的，内部会有 toString() 的处理，因为 HTML 的属性值只能是字符串。`data-*` 同理。
+
+但使用 uniapp 时，不同端表现不一样。
+
+```html
+<view data-attr></div>
+```
+
+对于 `dataset.attr` 微信小程序是布尔值 `true`，而 App 端则是字符串 `''`，后者表现是符合 HTML 规范的。猜测是微信小程序内部做了 `dataset.attr !== undefined` 的处理。如果要用于条件判断，要注意各端值是不一样的。
+
+未完待续...