Svg 未显示 - shadow-root

Question

I have a <template> with an SVG inside it and I am trying to add the template to the DOM. The template is added successfully - but the svg is hidden for some reason. Without templates, it works fine!

HTML :

<div id="output"></div>

<template id="template">
    <li>
        <svg class="...>
            <use href="./icons.svg#icon"></use>
        </svg>
        <span></span>
    </li>
</template>

JS :

const $output = document.getElementById('output');

// Clone template of auto complete addresses container
const $otherTemplate = $other.content.firstElementChild.cloneNode(true);

// Select the list container inside the template
const $list = $otherTemplate.querySelector('ul')

const $template = document.getElementById('template');

const $sugTemplate = $template.content.firstElementChild.cloneNode(true);

$list.appendChild($sugTemplate);

$output.appendChild($otherTemplate);

RESULT :

Answer 1

That's a chrome bug.

Bug report has been created: https://bugs.chromium.org/p/chromium/issues/detail?id=1099181