同一个 dom 可以在其他地方显示吗?

Question

我这个dom 我希望有一个浅clone, 或者引用地址, 在其他地方显示, 然后这个源dom 更改 其他 地址引用的dom 也跟着更改, 请问大佬们 有办法吗

Answer 1

火狐浏览器有一个 element() 可以实现这样的效果 https://developer.mozilla.org...

div{
 background: -moz-element(#id)
}

但是其他浏览器都不支持

Answer 2

Vue中的组件就是这样的呀, 使用虚拟DOM就可以了, ifram也是个选择

Answer 3

<div id="from" class="aaa">
        12
        <span>3</span>
    </div>
    <div id="target"></div>
    <button>change</button>
    <script>
        let hasWatched = false
        function clone(targetDom, container = document.getElementById('target')) {
            const cloned = targetDom.cloneNode(true)
            container.innerHTML = ''
            container.appendChild(cloned)
            if (hasWatched) {
                return
            }
            const config = { attributes: true, childList: true, subtree: true };
            const callback = (mutationList, observer) => {
                clone(targetDom, container)
            };
            const observer = new MutationObserver(callback);
            observer.observe(targetDom, config);
            hasWatched = true
        }
        clone(document.getElementById('from'))
        document.querySelector('button').addEventListener('click', () => {
            const from = document.getElementById('from')
            from.classList.toggle('aaa')
            from.insertAdjacentHTML('beforeend', `<span>${Math.random()}</span>`)
        })
    </script>

这样试试