How to use Paper or HA elements in custom Lovelace card

Hi,

This is my first post, so I’d like to start by saying THANKS to everyone involved in making Home Assistant - I’m amazed by its capabilities and the rate of development. And apologies if this isn’t the right forum for this kind of question.

I’ve created a custom component and a custom Lovelace card for a DIY project. All is working well, except that I’ve been unable to use the ha-textarea or paper-textarea Polymer elements in my Lovelace card. I can see them in the home-assistant-polymer repository, but the code that defines them is not being run. Because it has been chunked by Webpack, I’m not sure I could safely identify and import the right module.

I’ve tried using Node.js for my custom card, creating an npm package with a dependency on home-assistant-polymer. That way I can import @polymer/paper-input/paper-input.js or home-assistant-frontend/src/components/ha-textarea.js. But if I bundle my package using Webpack, and include it as a resource in the Lovelace config YAML, I get a browser error:

Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Module../node_modules/@polymer/polymer/lib/elements/dom-module.js

As far as I understand, my problem is that my bundled script is illegally trying to define the dom-module custom element (and presumably other), when they’ve already been defined separately in hass-frontend and my module. Because the two projects are bundled separately, there’s no de-duplication at the build stage. At the moment I can’t see any way to avoid this… unless I can do something with Webpack Externals?

I’m new to most of this, so hopefully I’m just missing something. Can anyone help, please? I’d really rather not fork home-assistant-polymer.

Thanks,
Adam

1 Like

You shouldn’t need to import home-assistant-polymer to use those elements, since they are there by default. Just use document.createElement(“paper-textarea”) or just add

<paper-textarea></paper-textarea>

to the HTML depending on how your custom card is rendered.

Some examples here https://github.com/custom-cards/roku-card/blob/master/roku-card.js

Thanks a lot for the quick replies! The first thing I tried was just using the element, but unfortunately it isn’t defined. customElements.get("ha-textarea") returns undefined, and if I just use it directly in the HTML I don’t get any content rendered.

It’s the same with many other elements, but not all. For instance, paper-input and mwc-button work, but not ha-input or paper-button. My best guess is that the chunks of Javascript that define these elements have not been run, because they have to be “lazy loaded” by code that depends on them.

I guess they would be loaded if my config included any “built-in” cards that require those chunks, but it doesn’t. I’ll test the theory later today by adding more cards. I’ll also experiment with RokuCard.

Thanks again for the help.

Best regards,
Adam

Hi Adam,
Did you get this working?
I’m facing the exact same misunderstanding you were.