原是代码:
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>
`;