Issues with Shadow DOM? about livingcss HOT 5 CLOSED

I decided to use shady DOM because shadow DOM isn't supported in FireFox, Safari, and IE/Edge. So to get a cross browser experience, using shady DOM will reveal problems in Chrome that might get ignored in the other browsers if shadow DOM was on.

As for the styling issues, I'm not sure what would be going on. The local file should still be using shady DOM and have all the comments at the top of the page. The div should be getting the styles for height/width (it looks like it partially is?). Is there a link you can give me that I can look at the end result for myself?

from livingcss.

Hmm, it's very strange. I'm starting to look into the possibility that it could be that multiple local versions of gulp are installed around the server and that there is some global/local caching cross over mix going on with the plugin... However, that's just a hunch.

I've installed it twice from scratch on my local machine and only the original seems to work properly so far. I'm trying to discern any differences between that original and any new installations, but I really can't see any.

You can see the server version of the messed-up results here: http://livingcss.rekeep.com/molecules.html

from livingcss.

So there does seem to be a bug in the web component that prevents styling correctly. Every element in the example should have the class livingcss-example appended to it, but for some reason your inner rk-swatch-col div doesn't. I'll take a look and see what happened.

from livingcss.

Much appreciated, thanks!
Now you've mentioned it, I've just checked the page code and it seems that class/ID reference in the CSS is missing the dot or hash.

 .livingcss__section {
    margin-top: 1.625rem;
  }

  livingcss-example {
    border: 1px solid #B6B6B6;
    padding: 1rem;
    border-radius: .25rem .25rem 0 0;
    display: block;
  }

from livingcss.

That is actually correct. The polymer element is called livingcss-example, so I'm able to style it directly using an element selector.

from livingcss.