对js的错误理解

最新推荐文章于 2024-03-27 09:26:41 发布

原创最新推荐文章于 2024-03-27 09:26:41 发布

· 214 阅读

0 ·

版权

JS常见BUG 专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了在JavaScript中操作影子DOM时的一个常见错误，即错误地将innerHTML赋值给了DOM元素而非其影子DOM。作者通过提供错误代码示例，解释了问题所在，并展示了如何正确地将内容插入到影子DOM中。修正后的代码确保了内容正确地在影子DOM内渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原是代码:

document.body.innerHTML = `
        <div id="foo" >
            <p>Foo</p>    
        </div>
`;
document.querySelector('div') .attachShadow({ mode: 'open' }) 
.innerHTML = `<div id="bar"> <slot></slot> <div>`

错误改进代码：

document.body.innerHTML = `
        <div id="foo" >
            <p>Foo</p>    
        </div>
`;
// 获取DOM对象
let a = document.querySelector('div');
// a.attachShadow({mode: 'open'})返回的是影子DOM对象
a.attachShadow({mode: 'open'});
// 这里a是DOM对象，我错误的以为是影子DOM对象...哎！失策
a.innerHTML = `
<div id="bar">
    <slot></slot>    
</div>
`;

正确改进代码：

document.body.innerHTML = `
        <div id="foo" >
            <p>Foo</p>    
        </div>
`;
let a = document.querySelector('div');
// 拿到返回的影子DOM对象
let attachShadow = a.attachShadow({mode: 'open'});
attachShadow.innerHTML = `
<div id="bar">
    <slot></slot>    
</div>
`;