Or will it be supported in future versions of browsers? I've been thinking about this and tried to read up on the topic, but I couldn't figure it out. I also tried the following (which did not work in either Chrome 96 or Safari 14):
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
<script type="module">
import { demo } from './demo.js'
const test = new demo();
console.log('x', test);
</script>
<rect x="0" y="0" width="50" height="50" />
</svg>
Is it possible? Will it be possible? Is there a workaround?
Very basic example
customElements.define("svg-component", class extends HTMLElement{
connectedCallback(){
this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" xml:space="preserve">
<rect x="0" y="0" width="50" height="50" fill="${this.getAttribute('fill')}" />
</svg>`;
// Your JS here
}
});svg-component{
width:150px;
display:inline-block;
}<svg-component fill="red"></svg-component>
<svg-component fill="yellow"></svg-component>
<svg-component fill="blue"></svg-component>