Does not work when used in Polymer.

[sanjayc77]

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  GSS_CONFIG = {
    worker: "../bower_components/gss/dist/worker.js"
  }
</script>
<script src="../bower_components/gss/dist/gss.js"></script>
<polymer-element name="polymer-greeting"  attributes="">
  <template>
    <style>
      /* styles for the custom element itself - lowest specificity */
      :host { display: block; }
      /*
      style if an ancestor has the different class
      :host(.different) { }
      */
    </style>
    <style type="text/gss">
      h1[line-height] >= 16;
    </style>
    <h1>{{ greeting }}, {{ greeting }}!</h1>
    <span>Update text to change the greeting.</span>
    <input type="text" value="{{ greeting }}">
  </template>
  <script>
    Polymer('polymer-greeting', {
      greeting : '\'Allo'
    });
  </script>
</polymer-element>

The script "gss.js" is downloaded, but it does not detect <style type="text/gss">.

[sanjayc77]

This is an issue with Polymer. See https://github.com/Polymer/platform/issues/23.

An alternative way to doing this would be to define a polymer component for the styles.

<gss-style id="myStyle">
...
</gss-style>

Then referencing this in another component:

<my-superbox gss-style="myStyle>...</my-superbox>

[d4tocchini]

There's a lot of issues with Polymer's polyfills, especially the ShadowDomPolyfill, see: https://github.com/Polymer/polymer/issues/346

Bottom-line, without native browser support, the polyfills have to do do crazy shit like monkey-wrench every DOM query method replacing all LiveNodeLists with static ones. Thus rendering libs like GSS considerably slower & unpredictable. I actually ended up adding spec/runner-polymer.html just to make sure things run when Polymer js files are loaded. Without native web components, I would tread carefully...

[shtefcs]

Hi Dan @d4tocchini

I was searching for but didn't find any info that say exactly is GSS work with Polymer. Can this two awesome things can be combined together ?

Peace,

[paulyoung]

I think the Shadow DOM issues @d4tocchini mentioned still stand. I tried to use GSS and Polymer recently and couldn't get things working fully.

I think the latest release candidate would be most promising, but no guarantees.

[sebpatu]

Does the gss team has a prefered lib to use gss with web components (polymer, angular etc) ? And could we have a sample integration code? AutoLayout coupled with web components is killer UI design feature, and gets web dev closer to native dev finally. especially if working on any legacy ie browser.

[Inviz]

In current implementation GSS is blissfully ignorant about shadow DOM. AFAIK, web components didn't prove to be very useful in our apps. But it's probably wouldnt be hard to hack Document base class to consider shadow DOM in tree-walker, and add custom Selector to target shadow descendants.

You should be careful of invasive shims though, that create dummies, wrap and replace elements, polluting MutationObserver log, as gss has to make sense of it.