AdaptiveCards

AdaptiveCards copied to clipboard

What platform is your feature request related to? (Delete other platforms).

• [x] 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.

@dclaux - care to take a look here?

I'll try to fix this. Will replace document.getElementById with querySelector which works at the element level, that should do the trick.

Is this still being considered for a fix?

I've again found myself in a similar position in a different application where it would be desirable for me to encapsulate the designer in a shadow DOM