Dynamically changing a style in Polymer 2.0

Question

I'm writing a proof of concept Polymer 2.0 web component where I want to change the colour of a piece of text depending on the user input.

I've tried using Polymer 2.0's this.updateStyles({...}) and Polymer.updateStyles({...}) but neither is updating the text which is output.

e.g.

Polymer.updateStyles({'--tool-colour': 'green'});

I've written a plunker which demonstrates the problem here.

I'm probably missing something simple, can someone help me out?

Answer 1

As Jordan Running commented, the problem was due to missing dependencies. I'd written code in an online editor (Plunker) assuming that all I needed to get polymer working was a reference to 'webcomponents-loader.js' and links to the other web components my bespoke component was using (doh!).

To get my Polymer element working I used the Polymer CLI facility provided by the Polymer team (specifically I used this for creating a Polymer element template project).

When I then used:

polymer serve

To run a local webserver to "serve" the app which was using my Polymer element, the dependencies then got resolved properly and the element worked.