Issues with Shadow DOM?

[IORoot]

Hi there, So, I've been using your livingcss (which is awesome BTW) and it's been working locally without a hitch, but I've started trying to run it on my server and the livingcss gulp process doesn't seem to be working quite right... I've stripped everything down to a single livingcss comment block and the gulp process only has a src > livingcss > destination, but still things are not as they should be.

The first issue is that when I look at the Devtools on server, it doesn't seem to be loading the shadow DOM and any Shady DOM Styles: (The local file doesn't have this).

My gulpfile looks like this:

// Tell node.js about these modules.
var gulp         = require('gulp');
var include      = require("gulp-include");
var concat       = require("gulp-concat");
var sass         = require('gulp-sass');
var livingcss    = require('gulp-livingcss');
var autoprefixer = require('gulp-autoprefixer');

// CONCAT / SASS Compile into CSS file.
gulp.task('livingcss-sass', function(){
    return gulp.src([
            './resources/assets/sass/molecules/swatch.scss',
    ])
        .pipe(concat('styles.scss'))
        .pipe(sass())
        .pipe(gulp.dest('./public/livingcss/src/'))
});

//Run the Living Stylesheet creator.
gulp.task('livingcss',['livingcss-sass'], function () {
    gulp.src('./public/livingcss/src/styles.css')
        .pipe(livingcss())
        .pipe(gulp.dest('./public/livingcss/dist/'))
});

The swatch.scss file has the following:

/**
 * Swatch
 *
 * Everything to do with the combinations of Atom components into Molecules.
 *
 * @section Swatch
 * @page Molecules
 *
 * @example
 * <div class="rk-swatch">
 *  <div class="rk-swatch-col"></div>
 * </div>
 */

$rk-white :                    #f7f7f7;

.rk-swatch {

  // Display & Positioning

  // Box Model
  width : 150px;
  margin: 10px;
  padding-bottom: 5px;

  // Colour
  background: $rk-white;

}

.rk-swatch-col {
  display: block;
  // Box Model
  width: 100px;
  height: 150px;

  background: #990000;
}

This creates the result:

Which is not the result that should be displayed. The styling for the rk-swatch-col DIV is not applied and the shadow DOM is not present.

Not sure what's happening at all. I've got it all successfully running locally and the results are fine.

Is this an issue here?

[straker]

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?

[IORoot]

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

[straker]

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.

[IORoot]

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;
  }

[straker]

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