feat(useClickAway): supports triggering callback by events outside the shadow dom

[yunsii]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	feat(useClickAway): supports triggering callback by events outside the shadow dom
🇨🇳 Chinese	feat(useClickAway): 支持由 shadow dom 外的事件触发回调

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[liuyib]

这个 PR 存在的问题：

注：以 demo6 举例说明

• 第一次渲染后，点击 mode: open 的 box 按钮，closed 的计数+1 了（不应该影响到 closed 的，要修复）
• 第一次渲染后，mode: closed 的 Shadow DOM 内第一次点击无效，从第二次点击开始正常（要修复）

原逻辑（mode: open/closed，原逻辑两个 mode 效果一样）：

• 第一次渲染后，点击 “document”、“Showdow DOM 中的 box 按钮” 也会使得 Shadow DOM 内计数+1（不应该，要修复）
• 第一次渲染后，在 Shadow DOM 中一直点击（效果正常）

预期效果：

• 对于 mode: open
  • 第一次渲染后，点击 document（Shadow DOM 之外的区域），mode: open 的计数+1
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的空白区域，mode: open 的计数+1
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的 box 按钮，mode: open 的计数不变
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的空白区域，mode: open 的计数+1
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的 box 按钮，mode: open 的计数+1
• 对于 mode: closed
  • 第一次渲染后，点击 document（Shadow DOM 之外的区域），mode: closed 的计数不变
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的空白区域，mode: closed 的计数+1
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的 box 按钮，mode: closed 的计数不变
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的空白区域，mode: closed 的计数不变
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的 box 按钮，mode: closed 的计数不变

这个 PR 离预期效果还有差距，后续我会跟进修复。

此外，预期效果中，对于 mode: open 的 Shadow DOM，点击 document 会使得计数+1，与原逻辑不同，是一个破坏性更改，要放到 v4 来做。。。

[yunsii]

这个 PR 存在的问题：

注：以 demo6 举例说明

• 第一次渲染后，点击 mode: open 的 box 按钮，closed 的计数+1 了（不应该影响到 closed 的，要修复）
• 第一次渲染后，mode: closed 的 Shadow DOM 内第一次点击无效，从第二次点击开始正常（要修复）

原逻辑（mode: open/closed，原逻辑两个 mode 效果一样）：

• 第一次渲染后，点击 “document”、“Showdow DOM 中的 box 按钮” 也会使得 Shadow DOM 内计数+1（不应该，要修复）
• 第一次渲染后，在 Shadow DOM 中一直点击（效果正常）

预期效果：

• 对于 mode: open

  • 第一次渲染后，点击 document（Shadow DOM 之外的区域），mode: open 的计数+1
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的空白区域，mode: open 的计数+1
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的 box 按钮，mode: open 的计数不变
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的空白区域，mode: open 的计数+1
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的 box 按钮，mode: open 的计数+1

• 对于 mode: closed

  • 第一次渲染后，点击 document（Shadow DOM 之外的区域），mode: closed 的计数不变
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的空白区域，mode: closed 的计数+1
  • 第一次渲染后，点击 mode: closed 的 Shadow DOM 内的 box 按钮，mode: closed 的计数不变
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的空白区域，mode: closed 的计数不变
  • 第一次渲染后，点击 mode: open 的 Shadow DOM 内的 box 按钮，mode: closed 的计数不变

这个 PR 离预期效果还有差距，后续我会跟进修复。

此外，预期效果中，对于 mode: open 的 Shadow DOM，点击 document 会使得计数+1，与原逻辑不同，是一个破坏性更改，要放到 v4 来做。。。

对于 mode: closed 有些用例好像不太能行的

[liuyib]

对于 mode: closed 有些用例好像不太能行的

是可能无法实现，还是我写的用例逻辑有问题呢？

---

我看了下，这个 PR 之前，mode: closed 的行为是和我写的预期效果一致的，所以应该不是能不能实现的问题

[yunsii]

我没记错的话 event.composedPath() 好像拿不到 mode: closed 里的 DOM 路径

[liuyib]

我没记错的话 event.composedPath() 好像拿不到 mode: closed 里的 DOM 路径

是的，拿不到。对哦，之前不是用 composedPath 实现的，所以，我写的 mode: closed 用例之前是好的，用了 composedPath 来实现估计就不行了。

那再看看吧，尽量按着这个用例来

[yunsii]

我没记错的话 event.composedPath() 好像拿不到 mode: closed 里的 DOM 路径

是的，拿不到。对哦，之前不是用 composedPath 实现的，所以，我写的 mode: closed 用例之前是好的，用了 composedPath 来实现估计就不行了。

那再看看吧，尽量按着这个用例来

demo 不是只有 mode: open 的吗？

[liuyib]

demo 不是只有 mode: open 的吗？

我手动改的 demo，测试的之前的效果