Example Image.vue with <style scoped>

[idank]

Is it possible to set a class on <Image> and have it be defined in a <style scoped> in the component that instantiates the Image? Basically if I'm replacing an existing <img> that had a class on it, I currently have to move that class to a plain <style> since it doesn't seem to trigger the scoped logic when it's passed into the <Image>.

This is more of a Vue question but you seem to know your way around so I figured I'd ask here first.

[ElMassimo]

Hi Idan 😃

Unless the <Image> component uses inheritAttrs: false, any classes that you pass to it will be added to the root element, so it should be applied just as before.

Scoped styles allow you to target elements rendered in the component, or in any direct children component root elements, so both of the scenarios you mentioned work in Vue.

Feel free to provide more details about the specific scenario.

[idank]

I do have the inheritAttrs: false though, since I think I want the attributes to be applied to the img element rather than the picture one, as shown in the example?

[idank]

I guess I could use a different selector that selects the child img when inheritAttrs is removed. I'll give that a try.

[idank]

I had to use :deep to get this to work: picture :deep(>img). Thanks!