Remove IDs from Vue Components

[apartmedia]

Description

HTML validation issue: Icons are wrapped in a div layer with an id attribute. HTML id attribs should normally have a unique character and therefore unique values. HOOBS is setting the value “icon” for each icon wrapper div. Is that the expected code design?

Version 4.0.79

Did you upgrade Please let us know if you upgraded from a previous version.

• [x] Yes
• [ ] No

Pervious version 3.3.7

Did you orginally upgrade to HOOBS 3 from HOOBS 2.1.1? Did you perform an upgrade from HOOBS 2.1.1? Some things are different.

• [ ] Yes
• [x] No

What device are you using? Please let us know the device you are running HOOBS on.

• [ ] HOOBS Box
• [ ] HOOBS SD Card
• [ ] Custom Install
• [x] HOOBS (3) image

If this is a custom install, what's your operating system? Original HOOBS 3 image

List your plugins

• Alexa
• homebridge-magichome-dynamic-platform
• Shelly

[mkellsy]

We have one Vue component for icons and the SVG path is switched based on the name that is passed in.

Elements are accessed via the Vue virtual DOM. IDs really don’t matter in this case.

I will look into not using ids at all.

[mkellsy]

IDs are used in components to add default styling while still allowing the class and style attributes from the caller.

Unique IDs are not necessary for Vue apps. I tried to use attribute tags, but it would require too many code changes. The risk is too great, where the reward negligable.