microsoft / microsoft/AdaptiveCards

JavaScript - Adaptive Cards Designer - Shadow DOM Support

Open
#5,398 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Designer Request
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.