¿O será compatible con futuras versiones de navegadores? Estuve pensando en esto y traté de leer sobre el tema, pero no pude resolverlo. También probé lo siguiente (que no funcionó ni en Chrome 96 ni en 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>¿Es posible? ¿Será posible? ¿Hay una solución?
Ejemplo muy básico
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>