feat: add scoped CSS support for Vue 3

[maartenbreddelsai]

Summary

• Use Vue 3's native compileStyle from vue/compiler-sfc for scoped CSS transformation
• Pass scopeId to compileTemplate for automatic data-v-* attributes on elements
• Add UI test for scoped styles
• Add example notebook

Implementation

Unlike the Vue 2 implementation which uses custom CSS rewriting, this uses Vue 3's built-in SFC compiler:

const compiled = compileStyle({
    source: content,
    id: scopeId,
    scoped: true,
});

The scopeId is also passed to compileTemplate so the template compiler automatically adds the data-v-* attribute to elements.

Related

• Vue 2 version: feat: add scoped css #103
• Base: vue3 branch (feat: Vue3 support #82)

[maartenbreddelsai]

Vue 3 Implementation

This PR uses Vue 3's native compileStyle from @vue/compiler-sfc for scoped CSS transformation.

Key differences from Vue 2:

• Uses Vue's official compiler instead of custom CSS rewriting
• The css trait with scoped=True is not available (deprecated in v3)
• Only <style scoped> in templates is supported

Example:

class ScopedStyle(vue.VueTemplate):
    @default("template")
    def _default_template(self):
        return """
        <template>
            <span class="demo">Widget A (scoped)</span>
        </template>
        <style scoped>
            .demo { color: green; }
        </style>
        """