这个问题更多的是针对用户创建的shadow DOM元素,但是对于可访问性,我将使用date输入类型来解决这个问题:
比方说,date我的页面上有一个输入.编辑完几个位后,阴影DOM标记(使用Chrome)看起来像:
<input type="date">
#document-fragment
<div pseudo="-webkit-datetime-edit">
<div pseudo="-webkit-datetime-edit-fields-wrapper">
<span role="spinbutton">dd</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span role="spinbutton">mm</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span role="spinbutton">yyyy</span>
</div>
</div>
<div></div>
<div pseudo="-webkit-calendar-picker-indicator"></div>
Run Code Online (Sandbox Code Playgroud)
与date输入相关的方法和属性似乎根本没有引用shadow DOM(JSFiddle),所以我想知道如何(如果有的话)可以访问这些shadow DOM元素?
我写了一个谷歌浏览器扩展程序,弹出一个带有自动填充字段的对话框,它有自己的风格,但是有些网站我的CSS完全坏了,看起来不太好看.
我知道使用iFrames隔离样式,但在Google Chrome扩展程序中,无法以这种方式隔离我的HTML和CSS.另一种方法是将我的所有东西包装成一个单独的div,它有自己的id和相关的id,我这样做,但似乎它不适用于某些网站上有"硬"标签样式重载或"! CSS代码中的重要"指令.
所以,我想知道有没有办法真正以z方便的方式隔离我的样式,或者是我的坏carma重载每个小CSS属性来修复每个站点的一个或另一个样式问题?
顺便说一下:我设置我的清单来加载"document_end"中的所有内容,但我发现它并没有被应用到每次DOM准备就绪时每次加载的样式表.