Chrome扩展：双击选词悬浮层样式遭页面样式覆盖的技术问询

• 用Shadow DOM彻底隔离样式
  这是最省心的方案，Shadow DOM能让你的Tooltip完全脱离页面样式的影响，内部样式只作用于自身。修改核心代码如下：

const tooltip = document.createElement("div");
// 创建Shadow Root
const shadowRoot = tooltip.attachShadow({ mode: "open" });

// 把样式和内容都塞进Shadow Root里
const styles = document.createElement("style");
styles.innerHTML = `
.tooltip-content {
  position: fixed;
  z-index: 999999;
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  /* 你的其他样式 */
}
`;
shadowRoot.appendChild(styles);

// 内容容器
const content = document.createElement("div");
content.className = "tooltip-content";
content.textContent = "单词释义及同义词内容"; // 替换成实际返回的内容
shadowRoot.appendChild(content);

document.body.appendChild(tooltip);

• 强化选择器特异性
  如果不想用Shadow DOM，就把你的CSS选择器写得比页面的更具体，再配合!important压过页面样式：

/* 用body直接子代+类选择器，提升特异性 */
body > div.extTooltip {
  position: fixed !important;
  z-index: 999999 !important;
  background-color: #ffffff !important;
  border: 1px solid #ccc !important;
  padding: 8px !important;
  /* 其他需要强制的样式 */
}

• 直接用行内样式强制生效
  行内样式的优先级比外部样式表高，在JS里直接给元素设置样式，能确保不被覆盖：

const tooltip = document.createElement("div");
// 直接设置行内样式
tooltip.style.position = "fixed";
tooltip.style.zIndex = "999999";
tooltip.style.backgroundColor = "#fff";
tooltip.style.border = "1px solid #ccc";
tooltip.style.padding = "8px";
// 其他样式同理

document.body.appendChild(tooltip);

内容的提问来源于stack exchange，提问作者Yana Mazo