使用 document.getElementById 将 ShadowDom 中的特定元素暴露给外部 JS [英] Expose specific element in ShadowDom to external JS using document.getElementById

查看：59 发布时间：2021/7/23 20:07:45 web-component shadow-dom polymer-2.x shady-dom

本文介绍了使用 document.getElementById 将 ShadowDom 中的特定元素暴露给外部 JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 v0/Polymer 1 Web 组件，我要升级到 v1/Polymer 2.这个 Web 组件动态构建一个 URI 来加载外部 JavaScript 文件.外部 JavaScript 文件运行并将 </code> 加载到我的组件的 <code></p><div></code> 中.此外部 JS 包含 <code>document.getElementById</code> 以将 <code><iframe></code> 加载到指定的 <code></p><div></code> 中.</p><p>我已经搜索过，但没有找到强制将 <code></p><div></code> 元素暴露/放置在 <strong>shady DOM</strong> 中的方法.我已经读过，如果我设计的组件没有 <strong>shadow DOM</strong>，则不会显示任何内容.</p><p>无论如何我可以使用外部脚本(第三方)将其更新到 web components v1/Polymer 2 仍然使用 <code>document.getElementbyId</code> 来修改 <code><div></code> 在 Web 组件内部?</p><p><strong>更新</strong>我发现我可以使用 <code><script>window.ShadyDOM = { force: true };</script></code> 或 <code><script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script></code> 但是我仍然无法通过 ID 访问该元素，并且我不想强制所有其他 webcomponents 使用 shady DOM.仍在寻找可能性.</p><div class="h2_lin"> 解决方案 </div><p>我必须做的是在我的 Web 组件模板中放入一个 <code><slot></slot></code>.当我声明自定义元素时，我必须在其中嵌套一个 <code></p><div></code> ，如下所示:<code><custom-element></p><div></div><p></custom-element></code> 我正在使用 <code>this.appendChild()</code> 其中 <code>this</code> 是自定义元素.元素中的 <code></p><div></code> 现在可以通过 <code>document.getElementById()</code> 访问，一旦它被分配了 <code>id</code> 属性.</p><p>I have a v0/Polymer 1 web component that I am upgrading to v1/Polymer 2. This web component dynamically builds a URI that loads an external JavaScript file. The external JavaScript file runs and loads an <code><iframe></code> into a <code><div></code> of my component. This external JS contains <code>document.getElementById</code> to load the <code><iframe></code> into the specified <code><div></code>. </p> <p>I have searched and haven't found a way to force the <code><div></code> element to be exposed/placed in the <strong>shady DOM</strong>. I have read that if I design the component without a <strong>shadow DOM</strong> nothing will be displayed. </p> <p>Is there anyway I can update this to web components v1/Polymer 2 with the external script (third party) still using <code>document.getElementbyId</code> to modify a <code><div></code> inside the web component?</p> <p><strong>UPDATE</strong> I have found that I can force webcomponents to use the shadow dom using <code><script>window.ShadyDOM = { force: true };</script></code> or <code><script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script></code> however I still cannot access the element by ID and I do not want to force all other webcomponents to use the shady DOM. Still looking for possibilities.</p><div class="h2_lin"> 解决方案 </div><p>What I had to do was put a <code><slot></slot></code> inside my Web Components template. When I declare the custom element, I have to nest a <code><div></code> inside of it like so: <code><custom-element><div></div></custom-element></code> which I am doing using <code>this.appendChild()</code> where <code>this</code> is the custom element. The <code><div></code> inside my element can now be accessed by <code>document.getElementById()</code> once it is assigned an <code>id</code> attribute.</p> <p>这篇关于使用 document.getElementById 将 ShadowDom 中的特定元素暴露给外部 JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2404589');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="document.getElementByID外部还是内联？" href="/652272.html"> document.getElementByID外部还是内联？; </a> </li> <li> <a target="_blank" title="如何使用document.getElementById选择iframe中的元素" href="/860713.html"> 如何使用document.getElementById选择iframe中的元素; </a> </li> <li> <a target="_blank" title="document.getElementById不能选择多个元素" href="/2222755.html"> document.getElementById不能选择多个元素; </a> </li> <li> <a target="_blank" title="vue.js 'document.getElementById' 简写" href="/2648811.html"> vue.js 'document.getElementById' 简写; </a> </li> <li> <a target="_blank" title="vue.js'document.getElementById'速记" href="/1481844.html"> vue.js'document.getElementById'速记; </a> </li> <li> <a target="_blank" title="document.getElementById('').va ..." href="/1379503.html"> document.getElementById('').va ...; </a> </li> <li> <a target="_blank" title="加速document.getElementById（）？" href="/1036919.html"> 加速document.getElementById（）？; </a> </li> <li> <a target="_blank" title="document.getElementById + regex" href="/1093055.html"> document.getElementById + regex; </a> </li> <li> <a target="_blank" title="document.getElementById（按钮..." href="/1262249.html"> document.getElementById（按钮...; </a> </li> <li> <a target="_blank" title="document.getElementById()VS. getElementById()" href="/2096326.html"> document.getElementById()VS. getElementById(); </a> </li> <li> <a target="_blank" title="的document.getElementById（“remem ..." href="/1182347.html"> 的document.getElementById（“remem ...; </a> </li> <li> <a target="_blank" title="document.getElementById是否返回实时dom元素?" href="/2284626.html"> document.getElementById是否返回实时dom元素?; </a> </li> <li> <a target="_blank" title="Call js function in python to use document.getElementById" href="/2904568.html"> Call js function in python to use document.getElementById; </a> </li> <li> <a target="_blank" title="将document.getElementById设置为variable" href="/1008813.html"> 将document.getElementById设置为variable; </a> </li> <li> <a target="_blank" title="document.getElementById vs jQuery $（）" href="/1003308.html"> document.getElementById vs jQuery $（）; </a> </li> <li> <a target="_blank" title="javascript - if(!document.getElementById) return;" href="/735583.html"> javascript - if(!document.getElementById) return;; </a> </li> <li> <a target="_blank" title="document.getElementById和值" href="/1529562.html"> document.getElementById和值; </a> </li> <li> <a target="_blank" title="document.getElementbyId（）返回null" href="/652325.html"> document.getElementbyId（）返回null; </a> </li> <li> <a target="_blank" title="document.getElementByID不是函数" href="/1811793.html"> document.getElementByID不是函数; </a> </li> <li> <a target="_blank" title="document.getElementById包含href" href="/2096330.html"> document.getElementById包含href; </a> </li> <li> <a target="_blank" title="如何使用 document.getElementById 在 iframe 中选取元素" href="/2700810.html"> 如何使用 document.getElementById 在 iframe 中选取元素; </a> </li> <li> <a target="_blank" title="计算属性中的 document.getElementById" href="/2475593.html"> 计算属性中的 document.getElementById; </a> </li> <li> <a target="_blank" title="jQuery中的document.getElementById()替代" href="/1486061.html"> jQuery中的document.getElementById()替代; </a> </li> <li> <a target="_blank" title="Chrome中的document.getElementById().innerText" href="/1807982.html"> Chrome中的document.getElementById().innerText; </a> </li> <li> <a target="_blank" title="如何在Node.js中使用document.getElementById()" href="/1795819.html"> 如何在Node.js中使用document.getElementById(); </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>其他开发最新文章</h5> <ul> <li> <a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html"> 拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'; </a> </li> <li> <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html"> 什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？; </a> </li> <li> <a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html"> 在运行npm install命令时获取'npm WARN弃用'警告; </a> </li> <li> <a target="_blank" title="cmake无法找到openssl" href="/516280.html"> cmake无法找到openssl; </a> </li> <li> <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html"> 从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件; </a> </li> <li> <a target="_blank" title="Twitter :: Error :: Forbidden - 无法验证您的凭据" href="/630061.html"> Twitter :: Error :: Forbidden - 无法验证您的凭据; </a> </li> <li> <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html"> 我什么时候需要一个fb：app_id或者fb：admins？; </a> </li> <li> <a target="_blank" title="将.db文件导入R" href="/902960.html"> 将.db文件导入R; </a> </li> <li> <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html"> npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件; </a> </li> <li> <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html"> 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '使用,document.getelementbyid,将,shadowdom,中,的,特定,元素,暴露,给,外部,js'; var cat = 'cc';';//other-dev</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>