Suggestion: Style scoping with pure CSS

[dojyorin]

Currently, scoped CSS is done by compiler.
However, today's CSS has great @scope rule.
By using this, I think we can achieve CSS scoping even more simply.

Example 1
Currently, if include <style> inside <template> it will be ignored, but if only @scope exists it will be passed through.

<!-- Good -->
<template>
    <style>
        @scope {
            .foo {
                background-color: cyan;
            }
        }
    </style>
    <div class="foo">Scoped</div>
</template>

<!-- Bad, ignored -->
<template>
    <style>
        .foo {
            background-color: cyan;
        }
    </style>

    <div class="foo">Scoped</div>
</template>

Example 2
Add .css or .style to component object.
Write your CSS rules inside it.
It's debatable whether to explicitly state @scope or add it internally.
Then insert contents of .css/.style directly under template root.

// When to specify
export const MyComponent = defineComponent({
    template: `<div class="foo">Scoped</div>`,
    setup() {/*...*/},
    style: `
        @scope {
            .foo {
                background-color: cyan;
            }
        }
    `
});

// When automatically assigned internally
export const MyComponent = defineComponent({
    template: `<div class="foo">Scoped</div>`,
    setup() {/*...*/},
    style: `
        .foo {
            background-color: cyan;
        }
    `
});

I don't know details of how template engine works internally, but I think it goes something like this.

// When to specify
const styleMergedTemplate = `<style>${component.style}</style>${component.template}`;
// When automatically assigned internally
const styleMergedTemplate = `<style>@scope{${component.style}}</style>${component.template}`;

Both will eventually be inserted into template.

<template>
    <style>
        @scope {
            .foo {
                background-color: cyan;
            }
        }
    </style>
    <div class="foo">Scoped</div>
</template>

Note

According to Can I Use FireFox is only modern browser that doesn't support @scope, but they are currently working on adding feature.

[jcupps]

Yes, or at least support targeting the component's root element(s) using :scope, e.g.

<style scoped>
:scope { ... }
</style>

This would avoid the need to use arbitrary class names to target the root element, which I personally encounter frequently.

A similar proposal has been discussed here: vuejs/vue-loader#1601