JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <player-tank></player-tank>
  <rect x="30" y="30" width="10" height="10" fill="red"></rect>
</svg>

CSS

svg, body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

JavaScript

customElements.define('player-tank', class PlayerTank extends SVGRectElement {
  constructor() {
    super()
    console.log(this)
    let root = this.attachShadow({mode:'closed'})
    root.innerHTML = `<rect x="10" y="10" width="10" height="10" fill="blue"></rect>`
  }
})