BotFramework-WebChat
BotFramework-WebChat copied to clipboard
microsoft
Webchat does not render correctly when added to a Web Component/shadowRoot
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:
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
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 - 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.
