Friday, April 27, 2018

Using StyleInjector with Polymer and Custom CSS Properties

I use StyleInjector to inject CSS rules that work with Shadow DOM Custom Properties: https://www.polymer-project.org/2.0/docs/devguide/shadow-dom

A snippit from the CSS I inject:

event-action-table.event-action-list-editor {
   
--table-height: 200px;
    a
-property-with-no-double-minus-prefix: 0;
}

A snippit from the custom element template:
    <style>
        vaadin
-grid {
          width
: 100%;
          height
: var(--table-height);
       
}
   
</style>


However, at run time, it looks like anything that is prefixed with '--' get's ignored by the injector. In the above case, my output element style looks like:
event-action-table.event-action-list-editor {
    a
-property-with-no-double-minus-prefix: 0;
}

Why is that?

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment