Frontend development

Development
1

I’ve been trying to make some tweaks to the home-assistant-polymer frontend. I’ve been able to get my javascript changes in home-assistant-js to work with:

npm run js_dev

But I haven’t been able to get home-assistant to recognize any of my changes to the polymer html templates (I’m currently trying to make some changes to the inline css in ha-label-badge.html).

Based on the frontend development instructions, after I make any changes it looks like I have to run:

script/build_frontend

This appears to run successfully, but none of my changes ever show up. I’ve tried with and without development mode on in my configuration.yaml file, I’ve tried restarting HASS, refreshing my browser, and running in incognito mode in case of caching, but my changes never show up.

This is my first time with Polymer, so any recommendations are appreciated!

2

Ok it looks like my environment works after all, but it’s just the specific css scope I’m trying to access that’s the problem. I’m trying to apply styles to children of iron-image in ha-label-badge.html:

This is the current style that constrains the state badges to circles:

  iron-image {
    border-radius: 50%;
  }

But the images inside iron-image can still bust out of the border-radius, so I was trying to add this:

  iron-image, iron-image * {
    border-radius: 50%;
  }

I’ve tried so many variations on this but with no luck… Any suggestions?

3

We’re using web components so you’re not allowed to style any children from other web components.

I actually just fixed this by removing the dependency on iron-image and use a CSS background-image instead.

There was a recent update to iron-image that caused the border-radius to no longer work. I’ve raised an issue with them.