在 Android 4.4 Webview 中使用 shadow-dom (Polymer)答案

【问题标题】：Using shadow-dom (Polymer) in Android 4.4 Webview在 Android 4.4 Webview 中使用 shadow-dom (Polymer)
【发布时间】：2023-03-22 05:06:01
【问题描述】：

我实际上是在使用自定义 Polymer 元素（基于 web-components 和 shadow-dom）构建一个 web 应用程序，但我遇到了一个严重的问题。

我希望这个应用程序在 Android 4.4 WebView 上运行，但是在 WebView 上测试应用程序时，我遇到了 shadow-dom 的一些问题，尽管它在 Chrome（Android 和桌面）上运行良好。当我尝试从 CSS（使用 ::shadow 或 /deep/）或纯 js 访问 shadowRoot 元素时，会出现此问题。

这是我的问题的简单说明：

<!-- custom-elt.html -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="custom-elt">

    <template>
        <div id="elt">some content</div>
    </template>

    <script>
        Polymer('custom-elt',{
            getElt: function(){
                return this.shadowRoot.getElementById('elt');
            }
        });
    </script>

 </polymer-element>

// script.js
window.addEventListener('polymer-ready',function(){
    var e = document.getElementsByTagName('custom-elt')[0];
    alert(e.getElt().innerHTML);
});

在 Chrome 上完美运行，但在 WebView 中却不行。根据 caniuse.com 的说法，Android 4.4 浏览器（WebView 使用它？）支持 shadow-dom 并带有“webkit”前缀（http://caniuse.com/#feat=shadowdom），但我没有找到一种方法来使用它前缀。

有什么办法吗？

谢谢

巴蒂斯特

【问题讨论】：

我也遇到了同样的问题——看起来 WebView 不支持 ShadowDOM，虽然 Chrome 支持...
您是否已经尝试将 WebChromeClient 声明到 WebView？

标签： javascript android webview web-component shadow-dom

【解决方案1】：

这是在聚合物网站上：

在没有原生 shadow DOM 的浏览器上，使用 wrap 函数访问元素上的方法和属性：

wrap($0).fire('my-event'); wrap($0).myproperty

这里有更多关于 shadowDOM 和 polyfill 的文档：https://www.polymer-project.org/docs/polymer/debugging.html#shadowdom

这让我问，你包括当前的 polyfill 吗？ https://github.com/furier/WebComponents

它最近在 0.5 版本中发生了变化，是一个重大变化。

【讨论】：