[英]Polymer using webcomponents.js instead of webcomponents-lite.js breaks app
嗨，我正在嘗試硫化我的應用程序，但使用webcomponents-lite.js似乎無法正確填充，閱讀后我發現一條建議說要使用webcomponents.js，當我使用時出現問題，但出現以下錯誤：
無法獲取未定義或空引用的屬性“ mousedown”無法獲取未定義或空引用的屬性“ click”
那就是我是否要硫化。 必須說我在使用Polymer時遇到的問題比我想象的要多。 在Chrome上無法正常工作，但其他瀏覽器無所不能。
這是我的index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="css/main.html">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="fullbleed">
<template id="app" is="dom-bind">
<paper-drawer-panel>
<paper-header-panel main>
<paper-toolbar>
<div>Toolbar</div>
<paper-icon-button icon="menu" paper-drawer-toggle>
</paper-icon-button>
<span class="flex"></span>
<paper-button onclick="_logout()">
<div>Log out</div>
</paper-button>
</paper-toolbar>
<neon-animated-pages class="flex" selected="{{selected}}">
<view-profile></view-profile>
<add-skill></add-skill>
<search-skill></search-skill>
<view-users></view-users>
</neon-animated-pages>
</paper-header-panel>
<paper-header-panel drawer>
<paper-toolbar>
</paper-toolbar>
<paper-menu class="list" selected="{{selected}}">
<paper-item>
<iron-icon icon="account-circle"></iron-icon>
<span>Profile</span>
</paper-item>
<paper-item>
<iron-icon icon="add" on-click="showAddSkill"></iron-icon>
<span>Add Skills</span>
</paper-item>
<paper-item>
<iron-icon icon="search"></iron-icon>
<span>Search</span>
</paper-item>
<paper-item>
<iron-icon icon="android"></iron-icon>
<span>Users</span>
</paper-item>
</paper-menu>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
這是我的elements.html：
<!-- Iron -->
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<!-- Neon -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">
<!-- Routing -->
<link rel="import" href="routing.html">
這是引發錯誤的自定義元素：
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">
<dom-module id="add-skill">
<style>
paper-dropdown-menu{
width: 20%;
--paper-input-container-label:{
color: red;
};
--paper-input-container-focus-color: red;
}
paper-input{
--paper-input-container-label:{
color: red;
};
--paper-input-container-label-focus:{
color: red;
};
--paper-input-container-underline:{
color: red;
};
--paper-input-container-focus-color: red;
}
form{
margin: 0px 0px 0px 100px;
}
paper-input{
width: 100px;
}
paper-button{
color: red;
}
paper-menu-button{
width: 100%;
}
</style>
<template id="skillForm">
<paper-material elevation="1">
<form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
<paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
<br />
<paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
<paper-menu class="dropdown-content" id="certificationSelect">
<template is="dom-repeat" items="{{certificationList}}">
<paper-item id="certificationName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
<br />
<paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
<paper-menu class="dropdown-content" id="classSelect">
<template is="dom-repeat" items="{{classesList}}">
<paper-item id="className" value="{{item}}">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
<br />
<paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
{{year}}
</paper-input>
<br />
<paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
<paper-item id="error"></paper-item>
</form>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../scripts/addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../scripts/getCertification.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="classSubmit"
method="POST"
url="../../scripts/getClass.php"
handle-as="json"
on-response="handleClassResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is:'add-skill',
behaviors:[Polymer.NeonAnimatableBehavior],
properties:{
animationConfig:{
value:function(){
return{
'entry':{
name:'slide-from-right-animation',
node:this
},
'exit':{
name:'slide-left-animation',
node:this
}
};
}
}
},
ready:function(){
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
this.sendClassRequest();
this.classesList = [];
var cookie = document.cookie;
},
sendVendorRequest:function(){
var datalist = 'vendor='+encodeURIComponent('1');
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('vendorList', response[i].name);
}
},
submitForm:function(event){
Polymer.dom(event).localTarget.parentElement.submit();
},
sendCertificationRequest:function(vendor){
var datalist = 'vendorName='+encodeURIComponent(vendor);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse:function(request){
this.splice('certificationList', 0, this.certificationList.length);
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('certificationList', response[i].name);
}
},
sendClassRequest:function(className){
var datalist = 'class='+encodeURIComponent('1');
this.$.classSubmit.body = datalist;
this.$.classSubmit.generateRequest();
},
handleClassResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length; i++){
this.push('classesList', response[i].name);
}
},
itemSelected : function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
this.validate();
},
listeners:{
'iron-form-submit': '_redirect',
'iron-form-response': '_redirect'
},
validate:function(){
var selectedVendor = document.getElementById('selectedVendorName');
if(selectedVendor.text !== null){
this.$.submitButton.disabled = false;
}
},
showIndex:function(){
this.$.skillForm.render();
this.fire('_showIndex');
},
});
</script>
</dom-module>
該應用程序加載緩慢，這在我大量導入時很有意義，因此建議使用硫化膠進行整理。 我在IE上收到一條隨機的層次結構消息。 如果我重新加載頁面幾次，它就會消失。 再次建議進行硫化處理
該問題是由ShadowDOM polyfill引起的。
如果使用不具有ShadowDOM的 webcomponents-lite.js代替webcomponents.js則所有webcomponents.js都將正常工作。
由於0.8-preview聚合物僅依賴於webcomponents-lite.js ，因此您可以使用它代替webcomponents.js而不會出現任何問題：由於polymer 0.8-preview ShadowDom polyfill絕對不必要
就個人而言，到目前為止我不需要使用Shadow DOM 。
Shadow DOM的示例：
<dom-module id="my-webcomponent">
<style>
...
</style>
<!-- //////////// Content of <template> will be appended to the <my-webcomponent> tag (works perfectly with webcomponents-lite.js) -->
<template>
<h1>Shadow Root!</h1>
</template>
<!-- //////////// This is Shadow DOM (doesn't work with webcomponents-lite.js) -->
<div id="outsideTemplate">
<h1>Shadow DOM!</h1>
</div>
<script>
Polymer({
is: "my-webcomponent",
...
...
...
});
</script>
</dom-module>
更多信息：
如果您仍然想使用webcomponents.js並遇到JQuery問題，也許（ 我沒有嘗試過 ）有一個“解決方案”：
您可以將所有JQuery內容包裝在此IIFE中 ：
(function(document) {
// JQuery code here
})(wrap(document));
注意：
Firefox團隊仍在 （ 仍在 ）上： https : //hacks.mozilla.org/2014/12/mozilla-and-web-components/
在Polymer 1.0中，為什么使用webcomponents-lite.js時我的硫化頁面無法在IE中顯示
[英]In Polymer 1.0 why does my vulcanized page not show in IE when using webcomponents-lite.js
無法在Firefox，Safari，IE（聚合物）上加載頁面-webcomponents.js錯誤
[英]Cannot load page on Firefox, Safari, IE (Polymer) - webcomponents.js error
使用webcomponents.js時訪問輕型DOM（陰影DOM polyfill）
[英]Access to light DOM when using webcomponents.js (Shadow DOM polyfill)
ReferenceError：未使用WebComponents和Polymer定義obj
[英]ReferenceError: obj is not defined using webcomponents & polymer
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.