ionic-team / ionic-team/ionic-framework

feat: Allow triggers and other references to be used inside shadow DOM of other WebComponent

未关闭
#30,752 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Make (Ionic) elements which refer to other (Ionic) elements be usable inside the shadow DOM of some other (non-Ionic) WebComponent.

### Describe the Use Case

When using elements which have a reference to some other element (like a trigger or an `` referencing an ``) the search for the reference is always performed on the root document. I use these elements inside a shadow DOM of some other WebComponent. I would like these references to be searched within the shadow DOM first and if failing, be performed on the root document.

### Describe Preferred Solution

_No response_

### Describe Alternatives

_No response_

### Related Code

Code wise this could probably be implemented without influencing existing code (except if you have the same identifier in your shadow DOM and your document root, but wondering if such a situation would be logical or only theoretical):
Every reference is searched using `document.getElementById(id)`. If all these occurrences are replaced by a call to the following function `getReferencedElement(this, id)`, it would try the local reference first.
```
function getReferencedElement(element, id) {
// Start searching within the elements shadow DOM or from document root
let rootNode = element.getRootNode();
let referencedElement = rootNode.getElementById(id);
if(referencedElement) {
return referencedElement;
}
// In case searched in shadow DOM (but did not find anything), search document root
if(rootNode !== document) {
return document.getElementById(id);
}
return null;
}
```
Above code is untested and meant to describe a general solution.

### Additional Information

I'm happy to create a PR if this feature would be accepted for incorporation.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。