在 Polymer 2.0 元素的阴影 dom 中的 javascript 脚本标签中找不到 div 样式（变换缩放）
Can't find div for styling (tranform zoom) in javascript script tag in shadow dom of polymer 2.0 element
我正在创建一个 polymer 2.0 PWA / 网站。我在访问 div 容器时遇到问题（我希望根据用户输入放大和缩小 div）。
在阴影 dom 和模板 dom 中，如果我无法获得 Javascript 中的元素，以便在用户操作（如按钮单击或滑块）移动时我可以缩放div.
我尝试了文档 getElementsByClassName、shadowroot 搜索。我可以在阴影 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;"> </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: </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> </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>
我期待我可以在阴影 dom 中找到元素，并能够通过转换 div.
来设置元素的样式和模仿放大缩小功能
我不确定如何获取元素以及它应该是什么语法。
尝试删除：
<template is="dom-bind">
...
</template>
您可以在 index.html 中使用 dom-bind 模板，以便在不定义新客户元素的情况下进行绑定。然后你可以 select 你的 div 元素与 this.shadowRoot...
有关 dom-bind
的更多信息
EDİT
因为有一些我不知道其值的变量，但请记住，如果 dom-if 语句为假，则其内容不会呈现。所以，你不能访问里面的任何元素。
我正在创建一个 polymer 2.0 PWA / 网站。我在访问 div 容器时遇到问题（我希望根据用户输入放大和缩小 div）。
在阴影 dom 和模板 dom 中，如果我无法获得 Javascript 中的元素，以便在用户操作（如按钮单击或滑块）移动时我可以缩放div.
我尝试了文档 getElementsByClassName、shadowroot 搜索。我可以在阴影 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;"> </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: </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> </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>
我期待我可以在阴影 dom 中找到元素，并能够通过转换 div.
来设置元素的样式和模仿放大缩小功能我不确定如何获取元素以及它应该是什么语法。
尝试删除：
<template is="dom-bind">
...
</template>
您可以在 index.html 中使用 dom-bind 模板，以便在不定义新客户元素的情况下进行绑定。然后你可以 select 你的 div 元素与 this.shadowRoot...
有关 dom-bind
EDİT
因为有一些我不知道其值的变量，但请记住，如果 dom-if 语句为假，则其内容不会呈现。所以，你不能访问里面的任何元素。