Javascript CSS是否有可能逃脱阴影dom（聚合物）？

我在聚合物中有一个下拉元件。由于z索引问题，我需要将下拉部分拉出，使其成为

的直接子级。不幸的是，我不知道如何做到这一点，但仍然能够实际设计元素的样式。我能想出的唯一解决办法是让下拉部分有自己的聚合物标签，但这似乎真的。。。向后

简言之，我有一个要素：

<my-element>
    <template>
        <style>...</style>

        <input>
        <div id="dropdown">...</div>
    </template>
</my-element>

...
...

然后在执行

document.body.appendChild（此.$.dropdown）

---

我正试图弄清楚如何在下拉列表移动后对其进行样式化，但Polymer/Web Components的CSS隔离阻止了我这样做。

[edit]请注意，polymer无法正确处理使用此方法通过DOM连接的事件处理程序上的

，因为它无法将DOM树返回到polymer元素。因此，事件需要手动附加到任何使用此方法的对象

我创建了一个可以插入任何元素的自定义元素，它将拉出以
body
开头的所有规则，并将它们升级为插入
head
的新样式表。还有一些工作要做，特别是在需要多填充的浏览器周围，因为
：：shadow
选择器不起作用。但我很快就会谈到这一点

<link rel="import" href="../polymer/polymer.html" />
<polymer-element name="promote-body-css">
    <script>
        'use strict';

        ~function(){
            var promoted = {};

            function promote( node ){
                var nodeName = node.nodeName;

                if( promoted[ nodeName ] ){ return; }

                var promoteRules = [];

                [].forEach.call( node.querySelectorAll( '::shadow style' ), function( stylesheet ){
                    [].forEach.call( stylesheet.sheet.cssRules, function( rule ){
                        if( rule.cssText.indexOf( 'body ' ) === 0 ){
                            promoteRules.push( rule.cssText );
                        }
                    } );
                } );

                if( promoteRules.length ){
                    var stylesheet = document.createElement( 'style' );
                    stylesheet.innerHTML = promoteRules.join( '' ) + '/* Inserted from polymer element ' + nodeName + ' */';

                    document.getElementsByTagName( 'head' )[0].appendChild( stylesheet );
                }
            }

            promoted[ nodeName ] = 1;

            Polymer( 'promote-body-css', {
                attached : function( parent ){
                    promote( ( parent = this.parentNode ).host || parent );
                }
            } );
        }();
    </script>
</polymer-element>


"严格使用",；
~function（）{
var={}；
功能提升（节点）{
var nodeName=node.nodeName；
if（提升的[nodeName]）{return；}
var启动子=[]；
[].forEach.call（node.querySelectorAll（“：：shadow style”），函数（样式表）{
[]forEach.call（stylesheet.sheet.cssRules，函数（规则）{
if（rule.cssText.indexOf（'body'）==0）{
promoteRules.push（rule.cssText）；
}
} );
} );
if（promoteRules.length）{
var stylesheet=document.createElement（'style'）；
stylesheet.innerHTML=promoteRules.join（“”）+'/*从聚合元素'+nodeName+'*/'插入；
document.getElementsByTagName（'head'）[0].appendChild（样式表）；
}
}
提升的[nodeName]=1；
聚合物（“促进身体css”{
附：功能（父级）{
升级（（parent=this.parentNode）.host | | parent）；
}
} );
}();
不，你没有。您不需要从影子DOM中取出东西来解决z索引问题：自定义元素与页面上的HTML不同，它是单个原子元素中受保护的内容。你能忘记你的解决方案，转而描述你面临的问题吗？@Mike'Pomax'Kamermans--是的，我知道。虽然我很感谢你的意见和对这个问题的潜在帮助，但请不要在不知道细节的情况下，就把人们当作他们的答案马上就错了。问题很简单——我有一个“选择框”，在某些情况下下拉列表会被隐藏，因为父节点要么有overflow:hidden，要么只是有一个堆栈上下文集。由于我的下拉列表需要位于页面上所有内容的顶部，解决方案是以某种方式将其从节点的阴影DOM中拉出。我只能根据您提供的详细信息进行回答。如果您的常规页面内容隐藏了自定义元素的下拉列表，唯一正确的解决方案是使您的页面不进行溢出隐藏：自定义元素意味着与世界其他地方完全隔离，并且它只能占用页面CSS允许的空间。取出元素意味着将其视为HTML模板实例而不是自定义元素。如果你使用定制元素，那么这种选择就放弃了“把东西拿出来”的奢侈（即使你可以写这样的黑客）@Mike'Pomax'Kamermans——这根本不是真的。自定义元素本应包含在内，但某些东西（选择框、全局弹出/覆盖、拖放等）的本质，再加上HTML某些方面的限制性，需要修改全局DOM以完成某些任务。元素在逻辑上仍然是孤立的，但它们的显示并不总是如此。此外，某些元素（如core drag drop）也执行相同的操作，并附加到
document.body
。你基本上是在说“永远不要将选择框作为web组件编写”。没有人会同意这一点，这简直是言过其实。我将从与聚合物开发人员的会谈中获得信息，所以这就是我能给你们的全部。黑客和任何其他JS一样简单（只需访问元素的shadowDOM，其实并不难找到），但是CSS引起的问题主要是CSS可以解决的问题。在这种情况下，这听起来像是一项确保正确的更高z指数的工作