Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webchat does not render correctly when added to a Web Component/shadowRoot #5194

Open
Joekraft opened this issue May 23, 2024 · 3 comments · May be fixed by #5196
Open

Webchat does not render correctly when added to a Web Component/shadowRoot #5194

Joekraft opened this issue May 23, 2024 · 3 comments · May be fixed by #5196
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete.

Comments

@Joekraft
Copy link

Joekraft commented May 23, 2024 •
edited
Loading

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Chrome (latest)

Which area does this issue affect?

Others or unrelated

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

Attempting to render Web Chat inside a Web Component does not appear to work, and renders in a broken state:
image

I'm presuming this could be from the CSS-in-JS not working correctly within a Shadow DOM? Are there any workarounds for this?

<!DOCTYPE html>
<html>
  <head>
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
    ></script>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat-container {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <webchat-element></webchat-element>

    <script>
      class WebChatElement extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
          const container = document.createElement('div');
          container.id = 'webchat';
          container.style.height = '100%';
          container.style.width = '100%';
          this.shadowRoot.appendChild(container);

          window.WebChat.renderWebChat(
            {
              directLine: window.WebChat.createDirectLine({
                token: 'YOUR_DIRECT_LINE_TOKEN'
              }),
              userID: 'YOUR_USER_ID',
              username: 'Web Chat User',
              locale: 'en-US'
            },
            container
          );
        }
      }

      customElements.define('webchat-element', WebChatElement);
    </script>
  </body>
</html>

Do you see any errors in console log?

No console errors

How to reproduce the issue?

Reproduce the provided html example above

What do you expect?

That the webchat should still render correctly with it's CSS

What actually happened?

The webchat does not appear to render with it's CSS

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

No response
@Joekraft Joekraft added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete. labels May 23, 2024
@OEvgeny
Copy link
Collaborator

OEvgeny commented May 23, 2024

Attaching to shadow DOM is not supported currently. For now, you could attach to the root and use slot as workaround. See the example: https://stackblitz.com/edit/webchat-shadow-dom-workaround

@OEvgeny OEvgeny linked a pull request May 24, 2024 that will close this issue
Open
13 tasks
@iiimpactbrynley
Copy link

@OEvgeny - I would also find this functionality vital, and great to see there is a pending PR for ShadowDOM support. Please update us when it is available.

@compulim
Copy link
Contributor

Still actively working hard on this. 🙇🏻‍♂️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Styles: add shadow DOM support microsoft/BotFramework-WebChat
4 participants
@compulim @OEvgeny @Joekraft @iiimpactbrynley