Question T15148
Visible to All Users

Registered svg icons inside sv-icon-holder-global-container are not leaked inside shadow dom

created a year ago (modified a year ago)

Hi Survey team,

We are planing to create an Angular web component that would render a surveyJS V2 instance inside it, that means that survey would be placed inside a shadow dom. All styling have been successfully handled, the only problem we encounter is that the sv-icon-holder-global-container set in the document header to render all the related icons it's in the main document header, outside the shadow dom, and looks like they are not leaked or cannot be accessible from a survey instance inside a shadow dom, e.g.

Clipboard-File-1.png
The icons are registered in the head tag:
Clipboard-File-2.png
But they are not rendered.

It's there a way using surveyJS V2 methods to achieve this(for example register that bundle inside the shadow dom etc.)?
We are using Angular v15 framework and survey v1.9.104

Thanks for your time

Comments (3)

    Hello Taylor,
    I would appreciate it if you could share a runnable demo which reproduces the issue.

    Thanks

    T T
    taylordardono a year ago

      Hi Jane,

      Here is the runnable demo: https://codesandbox.io/s/falling-resonance-5zj8k5
      You'll see that in the checkbox the checkmark is missing because cannot access the svg icon container, same for the rest of the icons

      Thanks again for your time

        Hello,
        Thank you for sharing this demo. We will investigate it and update you as soon as we have any news to share.

        Thanks

        Answers approved by surveyjs Support

        created a year ago

        Hello Taylor,
        Thank you for your patience. You can apply the following workaround to make SVG icons available: View the Updated CodeSandbox.

        JavaScript
        import { Component, OnInit, ViewEncapsulation, ViewContainerRef, ViewChild, ElementRef } from "@angular/core"; import { SurveyModel, settings } from "survey-core"; @Component({ selector: "app-survey", templateUrl: "./survey.component.html", styleUrls: ["./survey.component.css"], encapsulation: ViewEncapsulation.ShadowDom }) export class SurveyComponent implements OnInit { survey!: SurveyModel; title = "CodeSandbox"; @ViewChild("iconHolder", { read: ElementRef, static: true }) container?: ElementRef<HTMLDivElement>; surveyStructure = { ... }; ngOnInit(): void { settings.environment.svgMountContainer = this.container.nativeElement; this.survey = new SurveyModel(this.surveyStructure); } }

        Please let me know if you have any further questions.

        Thanks

          Comments (2)
          T T
          taylordardono a year ago

            Works! Thank you very much Jane, that makes a lot of sense.

            Is there anywhere in the docs where I could found any information regarding those settings properties?

            Thanks again for your time

              Hello Taylor,
              You're always welcome. I'm happy to hear that this option helped.

              Regarding the documentation: unfortunately, I cannot share any relevant help resources. ShadowDOM integration is not officially supported. However, we worked on this feature in the past to resolve some issues. I noted down your inquiry in the following thread: https://github.com/surveyjs/survey-library/issues/5703.

              Should you encounter any other issues running a SurveyJS Form in a ShadowDOM, please let me know.

              Thanks