Re: Using StyleInjector with Polymer and Custom CSS Properties

Can't figure out how to edit posts, last line should be

Document.get().getHead().appendChild(element);

On Friday, April 27, 2018 at 1:57:01 PM UTC-4, Tyler Moore wrote:

Made a workaround for this.

Instead of using StyleInjector. I just created a wrapper class that treats it like a mundane style element with loaded innerHTML from the resource:

public interface CSSStuff extends ClientBundle {

public static final PageCSSResources INSTANCE = GWT.create(PageCSSResources.class);

@Source("styles.css")
TextResource siteCss();

}

//...Somewhere else
StyleElement element = Document.get().createStyleElement();        
element.setInnerHTML(CSSStuff.INSTANCE.siteCss().getText());

Document.get().getHead().appendChild(shared.getElement());


On Friday, April 27, 2018 at 10:01:11 AM UTC-4, Tyler Moore wrote:

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.