下面是我的HTML：

<template id="team-members">

        <h3 style="text-align: center;">
            <span style="background-color: rgb(255, 170, 0);">
                <font color="#0000ff">[[TITLE]]</font>
            </span>
        </h3>

        <table class="[[ITEM-CLASS]]">
            <colgroup>
                <col class="pic" width="30%" />
                <col />
            </colgroup>
            <tbody>
                <!-- CONTAINER FOR ITEMS -->
                <span data-template="team-member" data-records="[[RECORDS]]"></span>
            </tbody>
        </table>

    </template>

Javascript：

const header = document.querySelector("template#team-members");
const myHTML = header.innerHTML;

输出：

<h3 style="text-align: center;">
            <span style="background-color: rgb(255, 170, 0);">
                <font color="#0000ff">[[TITLE]]</font>
            </span>
        </h3>
        <span data-template="team-member" data-records="[[RECORDS]]"></span><table class="[[ITEM-CLASS]]">
            <colgroup>
                <col class="pic" width="30%">
                <col>
            </colgroup>
            <tbody>
                <!-- CONTAINER FOR ITEMS -->
                
            </tbody>
        </table>

如您所见，包含属性data-template="team-member"的span被移动到了另一行。
如何修复？