search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
45.98k stars 8.05k forks source link

Scoped style not working in extend component #6158

Open leey0818 opened 2 years ago

leey0818 commented 2 years ago

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

UcheAzubuko commented 2 years ago

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

danielmiksavmlyr commented 1 year ago

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?