Javascript 是否可以通过父文档访问影子DOM元素？_Javascript_Html_Web Component_Shadow Dom

Javascript 是否可以通过父文档访问影子DOM元素？

javascript html

Javascript 是否可以通过父文档访问影子DOM元素？,javascript,html,web-component,shadow-dom,Javascript,Html,Web Component,Shadow Dom,这个问题更多的是针对用户创建的shadowdom元素，但是为了便于访问，我将使用date输入类型来回答这个问题：例如，假设我的页面上有一个日期输入。经过几位编辑后，这个（使用Chrome）的阴影DOM标记看起来像： <input type="date"> #document-fragment <div pseudo="-webkit-datetime-edit"> <div pseudo="-webkit-datet

这个问题更多的是针对用户创建的shadowdom元素，但是为了便于访问，我将使用

date

输入类型来回答这个问题：

例如，假设我的页面上有一个

日期

输入。经过几位编辑后，这个（使用Chrome）的阴影DOM标记看起来像：

<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>


#文档片段
dd
/
嗯
/
年份

与

date

输入关联的方法和属性似乎根本没有引用影子DOM（），因此我想知道如何（如果有的话）访问这些影子DOM元素？

您不能从影子DOM之外的脚本访问影子DOM的内容。封装是Shadow DOM的目的。

@int32\t从定义上讲，Shadow DOM是一种用DOM填充节点的方法，您希望从外部源隐藏DOM（）。关键是，作为组件作者，您可以选择哪些部分将暴露于外部CSS或JavaScript，哪些将不暴露于外部CSS或JavaScript

不幸的是，如果不使用另一个名为。如果您选择这样做，只需将自定义公共方法添加到元素的原型中即可。通过这些，您可以访问shadowdom的内部（参见第三个示例）

但是，您可以公开CSS的钩子来访问影子DOM的内部，而无需使用自定义元素。有两种方法可以做到这一点：

伪元素

CSS变量

伪元素 Chrome和Firefox通过特殊的伪元素将其阴影DOM的某些部分暴露给CSS。通过使用Chrome提供的

-webkit datetime edit

伪元素，添加了CSS规则的

date

输入示例，该规则仅适用于日期字段的数字部分

可用WebKit伪元素的部分列表。您还可以在DevTools中启用

显示阴影DOM

选项，并查找名为

pseudo

的属性

组件作者还可以创建他们自己的伪元素，以公开部分阴影DOM（参见第二个示例）

CSS变量更好的方法是使用CSS变量，您可以使用Chrome中的

about:flags

中的

enable experimental WebKit features

启用CSS变量。然后检查哪些使用CSS变量与Shadow DOM通信它的“主题”应该使用什么颜色。

现在（2016年）您可以使用Shadow DOM根目录上的方法

querySelector

访问open用户创建的Shadow DOM元素（但没有用户代理创建的Shadow DOM！）：

<body>
    <div id="container"></div>
    <script>
        //Shadow Root
        ̶v̶a̶r̶ ̶r̶o̶o̶t̶ ̶=̶ ̶c̶o̶n̶t̶a̶i̶n̶e̶r̶.̶c̶r̶e̶a̶t̶e̶S̶h̶a̶d̶o̶w̶R̶o̶o̶t̶(̶)̶
        //new syntax:
        var root = container.attachShadow( { mode: "open" } )

        //Inside element
        var span = document.createElement( "span" )
        span.textContent = "i'm inside the Shadow DOM"
        span.id = "inside"
        root.appendChild( span )

        //Access inside element
        console.log( container.shadowRoot.querySelector( "#inside" ) )
    </script>
</body>


得到

是。你只需要打电话给.root或.shadowRoot。举个例子

document.getElementById('itemId').root

如果父dom元素上没有innerText或innerHTML，您将无法获得影子dom元素。

您的问题是如何访问影子dom中的dom元素？您的JSFIDLE也不完整。不，如何通过ShadowDOM的父文档访问ShadowDOM元素<代码>/*Access here*/如果没有一些技巧，您不应该能够从Javascript访问影子DOM，这是有道理的。但是有没有办法在其中运行Javascript呢？就vanilla Shadow DOM而言，我不是最好的提问者，但是当您使用自定义元素时，您当然可以这样做。比如，看看上面提供的最新版本：我喜欢这个答案。。。然而，对于最后一部分有一个问题评论，它揭示了使用CSS变量的答案或方向。。。这假设用户在其作用域的阴影dom中提供了样式表。如果他们没有呢？例如，如果他们只是在没有提供变量的情况下对某个东西进行了样式化，该怎么办。在没有css变量和/或伪元素的情况下，如何访问SD中的类？顺便说一句，你的JSFIDLE似乎已经被弃用了为什么我们不能仍然访问用户代理shadow dom？我想这是因为它是本机浏览器实现，而不是真正的html。因此，没有办法在这些类型的输入编辑器中获取文本？该方法已经被弃用，取而代之的是