怎样注入一个 DOM 元素，不受继承的 CSS 的影响 ?

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2914 days ago, the information mentioned may be changed or developed.

我正在做一个翻译单词的浏览器扩展，需要在任意网站上注入一个翻译窗口，要防止当前网站的 CSS 影响翻译窗口的外观，所以提出这个问题。

还有两个方案，都不理想

1 插入一个 iframe，不会受到当前网站 CSS 的影响

2 插入一个自定义元素 <foo></foo>

CSS

插入

foo

翻译

23 replies • 2018-05-29 23:40:43 +08:00

fe619742721

May 29, 2018

important 不行么

xiaody

May 29, 2018

iframe 和自定义元素哪里不理想？
CSS 方案可以试试 https://www.w3.org/TR/css-cascade-3/#all-shorthand

yushiro

May 29, 2018 via iPhone

内联样式的优先级最高，自己先覆盖一遍呗

cccer

May 29, 2018

可以参考“划词翻译”这个插件，全部使用自定义元素。
https://chrome.google.com/webstore/detail/%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/ikhdkkncnoglghljlkmcimlnlhkeamad

wwjvtwoex

May 29, 2018

@xiaody 这两个方案还没试过，目前想到的有：

1 iframe 涉及窗口间传递参数

2 自定义元素实现 <select> 之类的比较麻烦

banricho

May 29, 2018

把元素插到 </html> 后面，虽然不符合规范，但是浏览器基本都能识别

wwjvtwoex

May 29, 2018

@yushiro 问题是想偷个懒，不想全部覆盖，而且谁知道什么奇怪的网站改了一些非常规的值

wwjvtwoex

May 29, 2018

@banricho 刚试过，不行 Firefox/Chrome

doubleflower

May 29, 2018

以前扫了一遍 web components 相关时记得好象有这么个技术，好象叫 Shadow DOM，chrome 原生支持的

leega0

May 29, 2018

楼上给了你答案

wwjvtwoex

May 29, 2018

@xiaody 感谢，似乎 style="all:initial" 能用

milklee

May 29, 2018

之前我也为这个问题纠结了很久，还为此写过一篇文章 https://github.com/lmk123/blog/issues/32

我尝试过挨个重置 css 样式、Shadow DOM、全自定义元素、iframe 这四种方式，最后还是觉得 all 最好。

milklee

May 29, 2018

@banricho @wwjvtwoex 可以把元素插入到 </head> 和 <body> 之间，这样浏览器是可以识别的

banricho

May 29, 2018

@milklee #13 我的锅，</body> 之后也行
刚才没考虑清楚，这样其实只能避免从父级继承，但对于直接定义标签还是没办法...
确实 all 更好，学习了

wwjvtwoex

May 29, 2018

@milklee 但使用 “ all ”，注入元素只有外观不受影响，依然不能避免 js 事件处理的影响，最终还得用自定义元素。

banricho

May 29, 2018

@wwjvtwoex #15 JS 事件处理的意思是？

wwjvtwoex

May 29, 2018

@banricho 宿主页面可能对你的 click 事件有其他的处理方法

banricho

May 29, 2018

@wwjvtwoex #17 这种可以阻止冒泡解决吧。。。

wwjvtwoex

May 29, 2018

我没仔细考虑，对注入的元素，“阻止冒泡” 确实可以解决。

mg122

May 29, 2018

z-index 层和透明度

chenyu8674

May 29, 2018

用 canvas 画一个 [doge]

gxm44

May 29, 2018

shadow dom

codehz

May 29, 2018

把源站放 iframe 里（