如何用JS创建简单ShadowDOM并实现其显示在当前HTML元素下方

AI 小北

2026-10-1

问题原因&解决方法

你当前的代码存在两个核心问题导致显示异常：

宿主元素没有设置定位上下文，shadow内部绝对定位元素默认相对于整个视口定位，容易出现位置偏移甚至遮挡全屏的情况
你给shadow内部的div设置了裁剪、溢出隐藏、极小宽高的隐藏类样式，本身也无法正常展示内容

修复后代码

var host = document.activeElement;
// 给宿主加相对定位，作为shadow内部元素的定位上下文
host.style.position = 'relative';
var root = host.attachShadow({mode: 'open'});
// 如果需要保留宿主原来的内容，要先加slot插槽
var slot = document.createElement('slot');
root.appendChild(slot);
var div = document.createElement('div');
div.className = 'shadow-content';
div.innerHTML = `
<style>
.shadow-content{
  position: absolute;
  /* 定位到宿主底部下方 */
  top: 100%;
  left: 0;
  width: 200px;
  height: auto;
  margin: 4px 0 0 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #eee;
  z-index: 999;
}
</style>
this is shadow dom
`;
root.appendChild(div);