Is possible to styling parent from child with scoped?

Question

Fellas, I've tried to style my parent class but inside the child component within the scoped style like this

Child component

<style lang="sass" scoped>
  .public-page
    overflow: unset
</style>

which parent component class looks like this

.public-page
  flex: 1
  overflow: hidden
  width: 100vw
  font-size: 14px !important
  color: #233142

is it possible to do it? Thanks in advance

It's possible to reach into parent components (and their styles) via `this.$parent`, but you are *strongly discouraged* to do so in most cases as it very tightly connects your components (styles will be weird if these components are not used in this exact configuration, and it will be unclear what causes it). For this use-case, I would add a class to the Parent component that unsets the overflow and conditionally add it to the class list when needed (from a child component's emitted event for example). Components workflow lends itself extremely well for using BEM css architecture. — Excalibaard, Apr 21 '21 at 09:21

Chris F Carroll · Accepted Answer · 2021-04-21T11:14:46.763

1

No.

html5's <style scoped> had a brief and useful life but is no more. It was obsoleted. Some discussion at What is the current state of the "scoped" attribute for the style element in HTML5?
Vue.js's <style scoped> applies to the current component.

edited Apr 21 '21 at 11:14

answered Apr 21 '21 at 08:25

Chris F Carroll

1

` – Excalibaard Apr 21 '21 at 09:03
so looking at https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles — `vue.js`'s ` – Chris F Carroll Apr 21 '21 at 11:12

1 Answers1