Scoped CSS Doesn't work on dynamic content

[ramakrishnamundru]

When using scoped CSS the styles and the elements are given data- attributes. But when content is added Dynamically it won't have those data- attributes. So the styles are not applying to the dynamic content.

I think it's better to add a data- attribute to the root element of the template and add the styles as the children of that attribute instead of adding attributes to individual elements..

[kazupon]

Thank you for your filling!

Can you provide the minimum reproduction code please?

[ramakrishnamundru]

I don't know how to reproduce it in a fiddle but look at this image.

here I am using a jquery plugin lc_switch which adds content to replace default checkbox.

the dynamic content is not getting the data- attributes.

so the scoped css styles are not applied

[ramakrishnamundru]

I created a repo showing this issue.

https://github.com/ramakrishnamundru/Vue-loader-scoped

just remove scoped for the plugin css and see changes

[kazupon]

Thank you for your codes!

scoped CSS with vue-loader & vue core can not give scopeId to the dynamic content with jQuery etc.
This is hacky even though, you can implement with _scopedId options.

src/components/Hello.vue

    mounted: function() {
      $('#switch').lc_switch('ON', 'OFF', this.$options._scopeId);
    }

src/assets/LC-switch/lc_switch.js

$.fn.lc_switch = function(on_text, off_text, scopeId) {
  // ...

  // should be changed dynamic content with scopeId
  // e.g. cod_on_text & ckd_off_txt
  var on_label = (ckd_on_txt) ? '<div ' + scopeId + ' class="lcs_label lcs_label_on">'+ ckd_on_txt +'</div>' : '';
  var off_label = (ckd_off_txt) ? '<div ' + scopeId + ' class="lcs_label lcs_label_off">'+ ckd_off_txt +'</div>' : '';
 // ...

[ramakrishnamundru]

Maybe, But in this way I have to edit most of the plugin files as many will create dynamic content because lc_switch is just an example.

Is in't there a way to add scopeId to the root of the component and modify the css as the children of the root scopeId. Like:

<template>
<div data-scopeId>
<content>
</content>
</div>
</template>

 And modify css like:

[data-scopeId] content{ /* somestyles */ }

[LinusBorg]

Something like this might work (untested):

Vue.directive('scope', {
  bind: updateScopeId,
  componentUpdated: updateScopeId
}

function updateScopeId(el, __, vNode) {
  const vm = vNode.context
  const scopeId = vm & vm.$options._scopeId
  if (scopeId) {
    vm.$nextTick(() => { // wait till DOM was updated
      setScopeRecursively(el, `v-${scopeId}`)
    })
  }
}

function setScopeRecursively(el, scopeString) {
  const nodes = el.children
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i]
    if (node.dataset[scopeString] !== '') {
      node.dataset[scopeString] = ''
    }
   if (node.children.length > 0) {
     setScopeRecursively(node, scopeString)
    }
  }
}

Usage

<div v-scope>
  <!-- 
    if you add any elements in here with jQuery, 
    the directive will add the scope data attributes for you.
    it will also re-check whenever the component updated, in case Vue changed the DOM
  -->
</div>

Limitations

• If your jQuery plugin adds any DOM Nodes after the component rendered and without any data change in the component triggering this update, the component will not re-render, and the directive will not know about thjis update. You might have to use vm.$forceUpdate() to make it update.

[ramakrishnamundru]

@LinusBorg your code didn't work for me. the setScopeRecursively function is never executed.

But I think the way of adding scopeId to the root element and modifying CSS accordingly is better solution. Is there a way you can implement this in vue loader....

[LinusBorg]

If you want to use a base base class on the root element and nested styled under it, you don't need scope, just use a unique classname.

[ramakrishnamundru]

@kazupon , @LinusBorg I there a way you can make vue-loader add and remove the style tag for scoped css along with the component i.e style tag added to dom when component created and removed when component destroyed,
Then there will be no such issue even with dynamic content as styles are automatically applied.
If thats not possible then atleast give option to add style tags inside the the template.

[ramakrishnamundru]

@yyx990803 This is clearly a problem because any thing dynamic should have it's css applied globally. So, It will effect content of other components. So the solution I think of is to move the style tag with scoped attribute into the template, so that it will only appear when its needed. otherwise many jquery plugins css will have to be applied globally, which have a lot of problems.

[LinusBorg]

So the solution I think of is to move the style tag with scoped attribute into the template, so that it will only appear when its needed.

That CSS is still being applied globally - it would merely reduce the "risk's" probability a little, and at worst create a false sense of security because it works as long as two components with matching CSS are not in the document together at the same - until they are, because your changed something in your app - and now you wonder why CSS is screwed up.

So I still don't see how we could have truly scoped CSS applied by vue-loader for elements that it doesn't know of, because third party libs create them during runtime.

[ramakrishnamundru]

That CSS is still being applied globally - it would merely reduce the "risk's" probability a little

If the style tag is removed from the dom then its content is also removed. and no styles will be applied to other components.
There is a discussion here:
angular/angular.js#2387

about style tags. I think it is possible to accommodate dynamic elements css by adding the style tag to template like this:

<template>
<root>
<content></content>
<link rel="stylesheet" type="text/css" href="link to scped css bundle">
</root>
</template>

just bundling all the files with scoped attribute and adding them to template will ensure that the css only comes when required and is removed with the component when switching route.

[LinusBorg]

If the style tag is removed from the dom then its content is also removed.

Of course, I don't deny that. But that CSS is still not scoped to the component, it's still applied to the whole document.

So if you have two component with conflicting CSS rules in the document at the same time, the CSS will be screwed up even with this method. So as I said above, it's a small improvement, but the "securtity" that it seems to bring is very brittle.

The ´discussion you linked to doesn't revolve around scoping issues either, AFAICT,