microsoft / microsoft/AdaptiveCards
JavaScript - Adaptive Cards Designer - Shadow DOM Support
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
What platform is your feature request related to? (Delete other platforms).
- JavaScript
Is your feature request related to a problem? Please describe.
I'm trying to attach the designer to a #designerRootHost element which resides inside the shadow DOM of a web component.
This itself works with (in my specific case) designer.attachTo(this.host.shadowRoot.getElementById('designerRootHost'));.
The problem is when we reach CardDesigner.prototype.attachTo. The first error is reached in this method at this statement:
this.toolbar.attachTo(document.getElementById("toolbarHost"));
The issue clearly is that #toolbarHost, itself within #designerRootHost, is in the shadow DOM of my component and cannot be accessed via document.getElementById.
There's potentially further problems of the same nature, but this is the first point where an exception occurs and execution stops.
Describe the solution you'd like
It should be possible, either by default or as an additional setting, that modifications to the contents of #designerRootHost are done directly to the element reference which has already been passed to the designer, rather than done via document.
If modifications to elements above #designerRootHost are required, then maybe it could be possible to pass a reference to the shadow DOM which contains it when enabling this shadow DOM support option.
Describe alternatives you've considered
Unless I missed that there is already support for this somehow then I cannot think of any other alternative, as unfortunately for our project to get the failing line above to succeed we would need to disable shadow DOM for all components up to the application's root component, which would break our application.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at CardDesigner.prototype.attachTo, especially the toolbar.attachTo(document.getElementById("toolbarHost")) call, and trace other lookups relative to designerRootHost. Determine how the passed element reference and any containing shadow root should be used, then verify that attaching the designer inside a shadow DOM no longer stops at the toolbar lookup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100