Subscribe on changes!

Scoped style not working in extend component

avatar
Jun 22nd 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBDb21wIGZyb20gJy4vQ29tcC52dWUnO1xuaW1wb3J0IEV4dGVuZGVkQ29tcCBmcm9tICcuL0V4dGVuZGVkQ29tcC52dWUnO1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPENvbXA+PC9Db21wPlxuICA8aHIvPlxuICA8RXh0ZW5kZWRDb21wPjwvRXh0ZW5kZWRDb21wPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNy9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM3L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXAudnVlIjoiPHNjcmlwdCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7XG4gIGRhdGE6ICgpID0+ICh7XG4gICAgdGV4dDogJ0hlbGxvJ1xuICB9KVxufSk7XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cCBjbGFzcz1cInRleHRcIj5cbiAgICB7eyB0ZXh0IH19XG4gIDwvcD5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4udGV4dCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHllbGxvdztcbiAgcGFkZGluZzogMTBweDtcbiAgZm9udC1zaXplOiAxLjNyZW07XG59XG48L3N0eWxlPiIsIkV4dGVuZGVkQ29tcC52dWUiOiI8c2NyaXB0IGxhbmc9XCJ0c1wiPlxuaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJztcbmltcG9ydCBDb21wIGZyb20gJy4vQ29tcC52dWUnO1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoe1xuICBleHRlbmRzOiBDb21wLFxuICBkYXRhOiAoKSA9PiAoe1xuICAgIHRleHQ6ICdIZWxsbyBleHRlbmRlZCdcbiAgfSlcbn0pO1xuPC9zY3JpcHQ+In0=

Steps to reproduce

Show displayed two texts

What is expected?

Extended component must also be styled.

What is actually happening?

Scoped style does not working in extended component.

System Info

No response

Any additional comments?

It works with vue@2.6.11 https://codesandbox.io/s/objective-flower-3o5h2o?file=/src/App.vue

avatar
Jun 24th 2022

Because the style was scoped, what happened is that the extends options allowed the reuse of template markup only.

avatar
Jun 27th 2023

It is June 2023, Vue version 3.3.4 and the issue is still not resolved nor commented. @yyx990803 I know, that this feature was not officially documented, but it was working in Vue 2.x version. Could you please share your thought on that?