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 件 担当者 0 名 GitHub で見る
type: feature request
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。