Using custom attributes and template conditionals

In this recipe, we will explore two polymer.dart features:

• Custom attributes: Like HTML attributes for normal tags, these are attributes for your Polymer component, and they can be changed in the code
• Template conditionals: The UI can be controlled by declarative conditions of the form <template if={{condition}}></template>, where a condition is an expression involving observed or published variables

You can find the code in the project custom_attrib.

How to do it...

In this example, we simulate an oven, with the temperature as its attribute. We show the temperature in a textual form, and also test the temperature to display an appropriate message, as shown in the following screenshot:

Custom attributes and template conditionals

1. The script starts with web\index.html, where a component with the name pol-oven is imported through the following line:

   <link rel="import"href="pol_oven.html">

   This component is used...