css - 在 polymer 2.0 元素的影子 dom 中的 javascript 脚本标签中找不到样式的 div(变换缩放)

Question

我正在创建一个 polymer 2.0 PWA/网站。我在访问 div 容器时遇到问题(我希望根据用户输入放大和缩小 div)。

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

我尝试了 document getElementsByClassName、shadowroot 搜索。我可以在 shadow dom 中看到这个 div 存在。只是无法在 Polymer 的 javascript 函数中访问它。

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

这是完整的代码(删除了一些不需要的代码元素，以便将重点放在手头的问题上)

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

元素:epicspring-page.html

<dom-module id="epicsprint-page">
 <template is="dom-bind">
   <style include="shared-styles">

  :host {
    padding: 10px;
     font-family:'Fira Sans', sans-serif;

  }

a paper-button,
a:hover paper-button,
a:link paper-button,
a:active paper-button,
a:visited paper-button {
  width: 20%;
  height: 35px;
}


.page { overflow:auto; width: 90%; height: 100%; }
.containerMap { width:100%;  background: grey; }


.error-content{
  width: 80wh;
  height: 300px;
  overflow: auto;
  align-items: center;
}

/*************/
.board­__sprint {
  /*background: #5ba4cf;*/
  position: absolute;
  left: auto;
  padding: 20px;
     overflow-x: auto;
     white-space: nowrap;
    }

  .list {
     display: inline-block;
     vertical-align: top;
     /*background: #d2d7e5;*/
      width: 300px;
    padding: 1px;

    }

    .list-content {
      max-height: 80%;
      overflow-y: auto;
      padding-right: 5px;
      /*margin-right: -5px;*/
      margin-bottom: 20px;
      padding-bottom: 60px;
    }

    .list-name {
      padding: 10px;
      border: none;
      background: transparent;
    }

   .add-ticket {
      background: linear-gradient(to bottom, #61bd4f 0, #5aac44 
         100%);
     color: white;
     font-weight: bold;
      border: none;
      padding: 10px;
    }

   .ticket {
      /*background: white;*/
      flex: 0 0 auto;
       margin: 5px;
       width: 200px;
      height: 70px;
      align-items: center;
      white-space: normal;
   }

    .ticket-title {
      width: 100%;
     padding: 20px;
   }
   /*********/

  </style>

  <iron-ajax
      id="getEpicSprintMap"
      method="GET"
      url="{{url}}"
      handle-as="json"
      content-type="application/json"
      on-response="handleResponseGetEpicSprintMap"
      on-error="handleErrorGetEpicSprintMap"
      last-response="{{mapsData}}"
      last-error="{{lastError}}">
  </iron-ajax>

  <div style="width: 100%">
     <div style="float:left;">
        <div><h5></h5></div>
         <paper-icon-button src="../images/icons/help-icon-png.png" 
      on-tap="showHelpDialog"></paper-icon-button>
    </div>
  <div style="float:right;">
    <div><h5></h5></div>
    <paper-icon-button src="../images/icons/support-icon-png.png" 
      on-tap="showHelpDialog"></paper-icon-button>
    </div>
</div>

 <template is="dom-if" if="[[signedin]]">
    <template is="dom-if" if="[[mapsData.successFlag]]">

    <div style="float: center;">
          <h5 style="color: white; font-size: 12px; text- 
   align:left;">&nbsp;</h5>
    </div>
    <div style="float: center; display: flex">
        <iron-image src="../images/logo.png" preload 
    sizing="contain"
          on-tap="reloadEpics" style="width:200px; height:200px; 
    margin:auto;" ></iron-image>
    </div>
    <div style="float: center;">
        <h1 style="color: white" class="launchAmount">Epics & 
    Sprints</h1>
        <h2 style="color: white" class="launchAmount">Number of 
   sprints that an Epic spans</h2>
    </div>

 <input id="test" min="1" max="1000" value='1000' step="1" 
     onchange="showVal(this.value)" type="range"/>
 <div class="containerMap" id="someid">
   <div class="page">
      <div class="content">
      <div class="board­__sprint">
        <template is="dom-repeat" items="{{mapsData.data}}" 
        as="row">
        <div class="list">
          <div class="list­-content">
            <div style="text-align: center;">
              <iron-image class=""
                           src="../images/icons/epic-icon-png.png"
                           preload
                           sizing="contain"
                           style="width:50px; height:50px; margin- 
         left: 50px;" ></iron-image>
            </div>
            <div style="text-align: center;">
              <h3 class="sprintTitle" style="color: white; font- 
    size: 15px;background: black; padding: 10px; margin-top: 5px;">
                <b>Epic:&nbsp;&nbsp;</b>[[row.key]]
              </h3>
              <h3 class="sprintTitle" style="color: white; font- 
   size: 15px;background: black; padding: 10px; margin-top: 5px;">
                [[row.title]]
              </h3>
            </div>
              <template is="dom-repeat" items="{{row.sprint}}" 
    as="sprint">
                  <div class="ticket">
                      <paper-card style="float:center; width: 95%" 
    class$="{{_computedCardColorStories()}}">
                        <div style="width: 100%;">
                          <div style="float:left; width: 10%" 
   style$="{{getRandomInt(0, 20)}}">
                            <h7>&nbsp;</h7>
                          </div>
                          <div style="float:left; width: 90%; text- 
    align: center; padding: 10px;">
                              <h7 style="color: black; font-size: 
      18px; text-align:center;">[[sprint]]</h7>
                           </div>
                         </div>
                      </paper-card>
                  </div>
              </template>
            </div>
        </div>
  </template>
</div>

  </div>
  </div>
 </div>

</template>
</template>

</template>

  </template>

<script>

/**
* @polymer
* @extends HTMLElement
*/
class EpicSprintMapPage extends Polymer.Element {
  static get is() { return 'epicsprint-page'; }

  constructor() {
      super();
    }

  ready() {
    super.ready();
  }

  static get properties() {
    return {
      user: { type: Object, notify: true, readOnly: false, observer: '_userChanged' },
      signedin: { type: Boolean, notify: true, readOnly: false, observer: '_signedinChanged' },
      statusKnown: { type: Boolean, notify: true, readOnly: false, observer: '_statusChanged' },
      localSettings : { type: Object, notify: true, readOnly: false },
      mapsData: { type: Object, notify: true },
      filterFromDate : { type: String, notify: true },
      filterToDate: { type: String, notify: true },
      defaultSprintVelocity: { type: Number, value: 0, notify: true },
      zoomVal: { type: Number, value: 100, notify: true },
      }
    };

  _userChanged(user){
    this.user = user;
  }

  _signedinChanged(signedin){
    this.signedin = signedin;
  }

  _statusChanged(statusKnown){
    this.statusKnown = statusKnown;
  }

  showVal()
  {
    var zoomScale = Number(this.zoomVal)/100;
    console.log('zoomScale = '+zoomScale);
    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; // doesn't find the element
// tried this.$['#someid'] this.$$('#someid')
    console.log(el);

    transformOrigin = [0,0];
    el = el || instance.getContainer();
    var p = ["webkit", "moz", "ms", "o"],
    s = "scale(" + zoomScale + ")",
    oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
    for (var i = 0; i < p.length; i++) {
        el.style[p[i] + "Transform"] = s;
        el.style[p[i] + "TransformOrigin"] = oString;
    }
    el.style["transform"] = s;
    el.style["transformOrigin"] = oString;
  }



}//end Polymer

   window.customElements.define(EpicSprintMapPage.is, EpicSprintMapPage);
  </script>

 </dom-module>

我期待我可以在 shadow dom 中找到元素，并能够通过转换 div 来设置元素的样式和模仿放大缩小功能。

我不确定如何获取元素以及它应该是什么语法。

Answer 1

尝试删除:

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

您可以在 index.html 中使用 dom-bind 模板，以便在不定义新客户元素的情况下进行绑定(bind)。然后您可以使用 this.shadowRoot... 选择您的 div 元素有关 dom-bind 的更多信息

EDİT

因为有一些我不知道值的变量，但请记住，如果 dom-if 语句为 false，则其内容不会呈现。所以，你不能访问里面的任何元素。