Custom Web Component with dynamically generated QR code

Two main areas I found difficult:

• Learning the Web Components API, which I had never touched before
• Writing a decent README!

Writing the template HTML and styling in JavaScript as an innerHTML string seems a bit counterintuitive (and breaks Intellisense). However, using a <template> directly in the page's HTML makes it so the Web Component isn't portable between pages or projects. Is there a better way to make Web Components portable, or is this the standard practice?

I cannot use <slot> elements directly in my HTML for some reason, even though as far as I can tell my browser supports it. The following HTML would not display the description text at all:

<qr-card url="https://www.frontendmentor.io/">
   <slot name="heading">Improve your front-end skills by building projects</slot>
   <slot name="caption">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</slot>
</qr-card> 

slot has be set as an attribute on other HTML elements. But this breaks the encapsulation of component styling. Since those elements are part of the outside DOM, whatever styles from the external CSS will be applied to those elements! For example the following <qr-card> is not used 'correctly,' since these aren't the elements the component is expecting.

<qr-card url="https://www.frontendmentor.io/">
   <h1 slot="heading">Improve your front-end skills by building projects</h1>
   <h1 slot="caption">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h1>
</qr-card> 

Would it be better to use custom attributes to strictly enforce styling, or am I doing something wrong?

Thanks in advance for any feedback, looking forward to being part of the community!