feat: add scoped css by maartenbreddelsai · Pull Request #103 · widgetti/ipyvue

maartenbreddelsai · 2026-02-02T12:45:14Z

Summary

implement scoped CSS handling for Vue SFC styles and css trait
add UI tests for scoped styles
expose optional scoped trait to override template styles

Issue

Closes #102

Copilot

Pull request overview

This PR implements scoped CSS support for Vue Single File Components (SFCs) in ipyvue, addressing issue #102 where styles leak between components. The implementation follows the httpVueLoader scoping approach and adds a new scoped trait to allow programmatic control of scoping behavior.

Changes:

Implements CSS scoping by transforming selectors to include unique data attributes
Adds optional scoped trait to VueTemplate to override template-level scoping
Includes UI tests verifying scoped styles work correctly and don't affect unscoped elements

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
ipyvue/VueTemplateWidget.py	Adds new `scoped` Bool trait to control CSS scoping behavior
js/src/VueTemplateModel.js	Adds `scoped` property to the JavaScript model defaults
js/src/VueTemplateRenderer.js	Implements core scoping logic: selector transformation, scope ID generation, and lifecycle integration
tests/ui/test_template.py	Adds comprehensive tests for both template-based and trait-based scoped CSS
.gitignore	Adds ipyvue/static/ to ignored directories for build artifacts

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-02T13:58:30Z

js/src/VueTemplateRenderer.js

+                        scopedSelectors.push(`${segments[1]}${scopeSelector}${segments[2] || ''}`);
+                    }
+                });
+                const scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);


The substr method is deprecated in JavaScript. Consider using substring or slice instead. Replace rule.cssText.substr(rule.selectorText.length) with rule.cssText.substring(rule.selectorText.length) for better future compatibility.

Suggested change

const scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);

const scopedRule = scopedSelectors.join(',') + rule.cssText.substring(rule.selectorText.length);

Copilot · 2026-02-02T13:58:31Z

js/src/VueTemplateRenderer.js

+                const scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
+                deleteRule(i);
+                insertRule(scopedRule, i);
+                continue;


The continue statement after modifying the rule is unnecessary and potentially confusing. When you delete and insert a rule at the same index, the loop counter already moves to the next rule naturally. The continue statement is redundant here and could mislead readers into thinking there's a reason to skip further processing. Consider removing it for clarity.

Suggested change

continue;

Copilot · 2026-02-02T13:58:31Z

js/src/VueTemplateRenderer.js

+            } else {
+                if (style.innerHTML !== css) {
+                    style.innerHTML = css;
+                }
+                style.removeAttribute('data-ipyvue-scope');
            }


When multiple component instances share the same cssId but have different scoped values, there's a bug in the CSS processing. For example, if instance A uses scoped CSS and instance B (created later with the same cssId) uses unscoped CSS, instance B will reuse the same style element. At line 124, the check style.innerHTML !== css may fail if the CSS content is the same, causing the code to skip updating the innerHTML. Then at line 127, the scope attribute is removed, but the CSS rules in the style element remain scoped from instance A, breaking instance A's styling. To fix this, the condition at line 124 should also check if the current scoping state differs from the desired state, or the innerHTML should always be reset when transitioning from scoped to unscoped.

Copilot · 2026-02-02T13:58:31Z

tests/ui/test_template.py

+    ipywidgets_runner, page_session: playwright.sync_api.Page
+):
+    def kernel_code():
+        from test_template import ScopedStyleTemplate


The module 'test_template' imports itself.
The module 'tests.ui.test_template' imports itself.

Copilot · 2026-02-02T13:58:32Z

tests/ui/test_template.py

+    ipywidgets_runner, page_session: playwright.sync_api.Page
+):
+    def kernel_code():
+        from test_template import ScopedCssTemplate


The module 'test_template' imports itself.
The module 'tests.ui.test_template' imports itself.

Copilot · 2026-02-02T13:58:32Z

tests/ui/test_template.py

+):
+    def kernel_code():
+        from test_template import ScopedStyleTemplate
+        import ipyvue as vue


This import of module ipyvue is redundant, as it was previously imported on line 7.

Copilot · 2026-02-02T13:58:32Z

tests/ui/test_template.py

+):
+    def kernel_code():
+        from test_template import ScopedCssTemplate
+        import ipyvue as vue


This import of module ipyvue is redundant, as it was previously imported on line 7.

maartenbreddelsai · 2026-02-02T14:33:14Z

Regarding the review note about redundant ipyvue import: that import is inside kernel_code that runs in the notebook kernel context, so it isn't redundant with the test module import; it ensures ipyvue is available in the kernel. We'll ignore that comment.

maartenbreddelsai · 2026-02-02T14:35:27Z

Addressed the remaining review notes in latest push: switched to substring, removed redundant continue, and handled scoped→unscoped reuse by resetting style content when prior scope was set.

maartenbreddelsai · 2026-02-03T16:52:58Z

Demo Screenshot

Results:

Widget A (scoped) - green ✅
Widget B (unaffected) - black ✅
Widget C (scoped via trait) - blue ✅
Widget D (unaffected) - black ✅

Both <style scoped> in templates and the css trait with scoped=True work correctly.

mariobuikhuizen · 2026-02-10T11:27:38Z

.gitignore

 # Compiled javascript
 ipyvue/labextension/
 ipyvue/nbextension/
+ipyvue/static/


This doesn't seem related.

- Implement scoped CSS handling for Vue SFC styles - Add scoped trait for css property - Rewrite CSS selectors with unique data-v-* attributes - Add example notebook demonstrating scoped styles - Add UI tests for scoped CSS functionality

Add scoped_css_support trait to VueTemplate that controls whether <style scoped> in templates is processed. This is a backwards-compatible change that defaults to False to avoid breaking existing code. Configuration options: - Environment variable: IPYVUE_SCOPED_CSS_SUPPORT=1 - Global setting: ipyvue.scoped_css_support = True - Per-widget: VueTemplate(..., scoped_css_support=True) The explicit scoped=True/False trait (used with the css trait) still works independently of this setting.

maartenbreddelsai force-pushed the feat_scoped_css branch from 86d1faf to a89e0d6 Compare February 2, 2026 12:48

maartenbreddels mentioned this pull request Feb 2, 2026

<style scoped> in Vue SFCs is not processed, causing CSS leakage between components #102

Closed

maartenbreddels requested a review from Copilot February 2, 2026 13:51

Copilot started reviewing on behalf of maartenbreddels February 2, 2026 13:52 View session

Copilot AI reviewed Feb 2, 2026

View reviewed changes

maartenbreddelsai force-pushed the feat_scoped_css branch from a89e0d6 to 4adef12 Compare February 2, 2026 14:34

maartenbreddelsai mentioned this pull request Feb 3, 2026

feat: add scoped CSS support for Vue 3 #104

Open

maartenbreddelsai force-pushed the feat_scoped_css branch 3 times, most recently from dff5cff to 9d60d1e Compare February 10, 2026 10:36

mariobuikhuizen approved these changes Feb 10, 2026

View reviewed changes

maartenbreddelsai force-pushed the feat_scoped_css branch from 9d60d1e to e0b9e79 Compare February 10, 2026 11:37

Maarten Breddels AI added 2 commits February 10, 2026 11:55

feat: add scoped CSS support

951e0ef

- Implement scoped CSS handling for Vue SFC styles - Add scoped trait for css property - Rewrite CSS selectors with unique data-v-* attributes - Add example notebook demonstrating scoped styles - Add UI tests for scoped CSS functionality

maartenbreddelsai force-pushed the feat_scoped_css branch from e0b9e79 to 1b37d8f Compare February 10, 2026 11:55

maartenbreddels merged commit 6fae0f4 into widgetti:master Feb 10, 2026
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add scoped css#103

feat: add scoped css#103
maartenbreddels merged 2 commits intowidgetti:masterfrom
maartenbreddelsai:feat_scoped_css

maartenbreddelsai commented Feb 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

maartenbreddelsai commented Feb 2, 2026

Uh oh!

maartenbreddelsai commented Feb 2, 2026

Uh oh!

maartenbreddelsai commented Feb 3, 2026 •

edited

Loading

Uh oh!

mariobuikhuizen Feb 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
	const scopedRule = scopedSelectors.join(',') + rule.cssText.substring(rule.selectorText.length);

Conversation

maartenbreddelsai commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Issue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

maartenbreddelsai commented Feb 2, 2026

Uh oh!

maartenbreddelsai commented Feb 2, 2026

Uh oh!

maartenbreddelsai commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo Screenshot

Uh oh!

mariobuikhuizen Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maartenbreddelsai commented Feb 2, 2026 •

edited

Loading

maartenbreddelsai commented Feb 3, 2026 •

edited

Loading