用webcomponents.js代替webcomponents的聚合物-lite.js破坏应用程序
用webcomponents.js代替webcomponents的聚合物-lite.js破坏应用程序
提问于 2015-10-14 19:25:30
嗨，我正在尝试硫化我的应用程序，但使用webcomponents-lite.js似乎没有正确地填充和阅读，我发现了一个建议使用webcomponents.js，问题是当我使用时，我得到这些错误：
无法获得未定义或空引用的属性“mousedown”，无法获得未定义或空引用的属性“单击”
那是如果我硫化或不硫化。必须说，我有更多的问题使用聚合物比我认为我应该。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上得到了一条随机的等级信息。如果我重新加载页面几次，它就会消失。再一次，硫化也被建议来解决这个问题。
Stack Overflow用户
发布于 2016-11-01 20:00:08
这个问题是由ShadowDOM填充引起的。
如果使用的是没有webcomponents-lite.js的ShadowDOM，而不是webcomponents.js，那么所有这些都将正确工作。
由于0.8-preview聚合物只依赖于webcomponents-lite.js，所以您可以使用它而不是webcomponents.js，而不存在任何问题:由于polymer 0.8-preview，ShadowDom填充绝对是不必要的。
就我个人而言，到目前为止我还不需要使用阴影DOM .
阴影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>更多信息：
- https://github.com/webcomponents/webcomponentsjs/issues/75
- https://github.com/webcomponents/webcomponentsjs/issues/89
如果您仍然想使用webcomponents.js，并且对JQuery有问题，那么也许(我还没有尝试过)有一个“解决方案”：
你可以把所有的JQuery东西都包在这个生平里
(function(document) {
// JQuery code here
})(wrap(document));注： Firefox (仍在)致力于此：https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33133916
复制相关文章
相似问题
腾讯云开发者
