Skip to content

Fix(playground): restore styles in web-component sample - #5497

Open
Srinivas Rao Tammireddy (srinu2003) wants to merge 2 commits into
microsoft:mainfrom
srinu2003:fix/web-component-playground-sample
Open

Srinivas Rao Tammireddy (srinu2003) wants to merge 2 commits into
microsoft:mainfrom
srinu2003:fix/web-component-playground-sample

Conversation

@srinu2003

Copy link
Copy Markdown

Summary

Fixes the creating-the-editor/web-component playground sample which broke in Monaco >= v0.53.0.

Cause

In Monaco v0.53.0+, stylesheet injection no longer adds the data-name="vs/editor/editor.main" attribute to the <link> element. As a result, document.querySelectorAll("link[rel='stylesheet'][data-name^='vs/']") returns an empty NodeList, leaving the shadow root unstyled.

Fix

Added [href*='vs/'] to the selector:

const styles = document.querySelectorAll(
    "link[rel='stylesheet'][data-name^='vs/'], [href*='vs/']"
);

This maintains backward compatibility with older versions (which use data-name) while working with all current versions where styles are matched by path.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant