There is a risk with introducing your own HTML elements. The World Wide Web Consortium publishes the HTML standard that browsers implement. The custom elements API is available to do precisely what you did. According to the HTML5 spec, no new elements will be added with a hyphen in the name (see valid custom element names). The elements you defined shouldn't conflict with future HTML revisions because you prefixed the names with
Lastly, you can utilize the shadow DOM as a means to encapsulate components. In fact, the shadow DOM is used by modern browsers to implement interactive form fields like native date pickers.
Which one you choose is a matter of taste. If you need styling, behavior and markup combined into a single component, consider using the shadow DOM since this provides a natural way to encapsulate the component from the rest of the web page.
script tags with JSON as well. Not a standard way of doing it, but it also works:
"foo": [ ... ]
There is no single right way to do this. You have a number of options available, so choose the one that is the best balance between the HTML standard and getting the job done. Just know that if you don't adhere to the HTML spec, you risk breaking the page if future updates to the standard conflict with your custom HTML.