Applies the styles only to this component's elements by adding a data-v-* attribute

Puts the component into a Shadow DOM

Loads the styles only when the component is visible

Vue · Junior · Question 34 of 75

What does `<style scoped>` do?

✓Correct answer: Applies the styles only to this component's elements by adding a data-v-* attribute
2Puts the component into a Shadow DOM
3Loads the styles only when the component is visible

Explanation

The compiler rewrites .btn to .btn[data-v-7ba5bd90]. A child component's root element is affected by both the parent's and its own scoped styles; to style deeper elements use :deep().

What does `<style scoped>` do?

Explanation

Further reading

Problem with a question

Test yourself

What does <style scoped> do?

Explanation

Further reading

Test yourself

What does `<style scoped>` do?