Question

我正在创建聚合物2.0 PWA /网站。我在访问div容器时遇到问题（我希望根据用户输入来放大和缩小div）。

在带有模板dom的影子dom中，如果我无法获取Javascript中的元素，以便在用户操作（例如按钮单击或滑块）移动时可以缩放div。

我尝试了文档getElementsByClassName，shadowroot搜索。我可以在影子dom中看到该div存在。只是无法在Polymer的javascript函数中访问它。

{'Pittsburgh Pirates at Cincinnati Reds': '2019-07-31T12:35:00', 
'Milwaukee Brewers at Cincinnati Reds': '2019-09-26T12:35:00', 
'Miami Marlins at Cincinnati Reds': '2019-04-11T12:35:00', 
'Atlanta Braves at Cincinnati Reds': '2019-04-25T18:40:00', 
'San Francisco Giants at Cincinnati Reds': '2019-05-06T12:35:00', 
'Chicago Cubs at Cincinnati Reds': '2019-08-11T13:10:00', 
'Los Angeles Dodgers at Cincinnati Reds': '2019-05-19T13:10:00', 
'Washington Nationals at Cincinnati Reds': '2019-06-02T13:10:00', 
'Texas Rangers at Cincinnati Reds': '2019-06-16T13:10:00', 
'Houston Astros at Cincinnati Reds': '2019-06-19T12:35:00', 
'Cleveland Indians at Cincinnati Reds': '2019-07-07T13:10:00', 
'St. Louis Cardinals at Cincinnati Reds': '2019-08-18T13:10:00', 
'Colorado Rockies at Cincinnati Reds': '2019-07-28T13:10:00', 
'Los Angeles Angels at Cincinnati Reds': '2019-08-06T19:10:00', 
'San Diego Padres at Cincinnati Reds': '2019-08-21T12:35:00', 
'Philadelphia Phillies at Cincinnati Reds': '2019-09-05T12:35:00', 
'Arizona Diamondbacks at Cincinnati Reds': '2019-09-08T13:10:00', 
'New York Mets at Cincinnati Reds': '2019-09-22T13:10:00'}

这是完整的代码（删除了一些不需要的代码元素，以便重点关注当前的问题）

MyApp.html

var ele = document.getElementsByClassName('containerMap')[0]; // 
returns null in console can't find the element in shadow Dom
      var el = this.shadowRoot.querySelector('someid'); // returns 
            null in console also tried '#someid' still null
    console.log('shadowRoot el = '+JSON.stringify(el));
    var elx = document.getElementById('someid'); // returns null in 
                                                   console
    console.log('shadowRoot el = '+JSON.stringify(elx));
      //var el = this.$.someid; // does not find the element
      // tried this.$['#someid'] this.$$('#someid') // does not work
    console.log(el);

元素：epicspring-page.html

 <link rel="lazy-import" href="epicsprint-page.html">

 <dom-module id="my-app">
   <template is="dom-bind">
     <style>
       ....
     </style>
     ....

<app-header-layout >

    <div style="float:left; width:100%;">
         <div style="float:left; width:10%;">
           <paper-icon-button id="menuElement" icon="icons:menu" drawer-toggle halign="left"></paper-icon-button>
         </div>
    </div>

  <div fit class="content">
        <!-- IRON PAGES MAIN CONTENT -->
        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="not-found-404"
            role="main">
          <epicsprint-page name="epicsprint-page" user="{{user}}" 
             signedin="{{signedIn}}" statusknown="{{statusKnown}}" > 
          </epicsprint-page>
                  .....

      </div>
      </app-header-layout>
   </app-drawer-layout>
  </template>
</template>
 <script>

</script>
    ...

    window.customElements.define(MyApp.is, MyApp);
  </script>
 </dom-module>

我希望我可以在阴影dom中找到该元素，并且能够通过变换div来设置元素的样式并模仿缩放功能。

我不确定如何获取元素以及应使用的语法。

Answer 1

尝试删除：

<template is="dom-bind">
...
</template>

您可以在index.html中使用dom-bind模板来进行绑定，而无需定义新的custome元素。然后，您可以使用this.shadowRoot...选择div元素有关dom-bind

的更多信息

EDİT

由于有些变量我不知道其值，但是请记住，如果dom-if语句为false，则其内容不会呈现。因此，您不能访问其中的任何元素。

在聚合物2.0元素的阴影dom中的javascript脚本标签中找不到样式（变形缩放）的div

1 个答案: