создание элемента svg с областью видимости с Vue и теневым доминированием

Question

Я пытаюсь создать какой-то компонент svg, который инкапсулирует внутренние идентификаторы как локальные, что решит проблемы с конфликтом наличия одного и того же идентификатора в моем документе. с использованием shadow dom: поскольку теневое dom не может быть напрямую прикреплено к svg, я хочу обернуть его в div и убедиться, что все его слушатели $ и $ attrs, а также $ children переходят во внутренний элемент.

Я пытаюсь сделать что-то подобное, но застрял в том, как работать между теневым домом и vue:

{
  mounted() {
    this.$el.attachShadow({ mode: 'open' })
    // ? how can I create the root <svg> element inside,
    // and make so it's synced with its parent?
  }
  render(h) {
     // ? How can I transfer $children to be under
     // <svg> root in the shadow dom?
  }
}