Embed Declarative Custom Component?

I’ve seen snippets around the web implying it can be done, but cannot quite figure out how to do it myself. Essentially I’d like to take a custom class extending a component and embed this directly into a declarative HTML file (not in designer, by hand). It looked to me like the syntax was just package name separated by underscores followed by de-camel-casing the classname and using hyphens (
<com_acme-my-component>
for
‘com.acme.MyComponent’
), but on load it isn’t able find that component even though it is on the classpath. What am I missing?

Hi,

you’ll need to add the <meta name=“package-mapping” …​> tag to the beginning of the document if you’re using custom components. See the Book of Vaadin for an example:
https://vaadin.com/docs/-/part/framework/application/application-declarative.html

-Olli

Thanks - this works for production code, but in my prototyping code I can’t use packages (based on how my prototyper is written). Is there any way to create a mapping to the the root? I’ve tried content=“my:”, content=“my:.”, content=“my” all to no avail. Any ideas? Or impossible?

Sorry, no idea. Maybe if you built a custom version?

-Olli