Javascript Firefox中的多个聚合Web组件出现故障
我已经使用多个自定义组件成功地在Chrome中构建了一个站点,一切都按预期运行 如果我在演示页面上一次运行一个组件,它将在Firefox上呈现。现在,在使用多个自定义组件进行跨浏览器测试时,它们在使用Firefox v41时都无法呈现*。(虽然第一次快速刷新时出现了一些组件;侥幸?) *我所说的“无法呈现”是指dom中的内容显示在页面上,但不会显示为投影到阴影dom中,也不会继承自定义组件中定义的样式或函数,而只是从索引文件中继承样式 如何在一个页面上为Firefox呈现多个dom模块? 错误日志:Javascript Firefox中的多个聚合Web组件出现故障,javascript,firefox,polymer,web-component,Javascript,Firefox,Polymer,Web Component,我已经使用多个自定义组件成功地在Chrome中构建了一个站点,一切都按预期运行 如果我在演示页面上一次运行一个组件,它将在Firefox上呈现。现在,在使用多个自定义组件进行跨浏览器测试时,它们在使用Firefox v41时都无法呈现*。(虽然第一次快速刷新时出现了一些组件;侥幸?) *我所说的“无法呈现”是指dom中的内容显示在页面上,但不会显示为投影到阴影dom中,也不会继承自定义组件中定义的样式或函数,而只是从索引文件中继承样式 如何在一个页面上为Firefox呈现多个dom模块? 错误日
Error: DuplicateDefinitionError: a type with name 'dom-module' is already registered
TypeError: Polymer.Base._getExtendedPrototype is not a function
TypeError: Polymer.CaseMap is undefined
TypeError: this._desugarBehaviors is not a function
TypeError: this._meta.byKey is not a function
TypeError: Polymer.Base._hostStack is undefined
索引文件:
<html>
<head>
<link href='/css/styles.css' rel='stylesheet' type='text/css'>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/ac-theme/color.html">
<link rel="import" href="/bower_components/ac-theme/sizing.html">
<link rel="import" href="/bower_components/ac-messagebar/ac-messagebar.html">
<link rel="import" href="/bower_components/ac-site-footer/ac-site-footer.html">
</head>
<body>
<ac-messagebar>Message bar.</ac-messagebar>
<ac-site-footer small-query="(max-width: 500px)">
<section>
<ul>
<li>
Links<br/>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</section>
</ac-site-footer>
</body>
自定义组件结构:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../ac-theme/color.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">
<dom-module id="ac-site-footer">
<template>
<style is="custom-style">
:host {
/*css;*/
}
</style>
<iron-media-query
id="mq"
query="{{smallQuery}}"
query-matches="{{smallScreen}}"
on-query-matches-changed="_screenChanged"
></iron-media-query>
<div class="content-container">
<content></content>
</div>
</template>
<script>
Polymer({
is: "ac-site-footer",
properties: {
smallQuery: {
type: String,
value: '(max-width: 600px)',
notify: true
}
},
...
</script>
:主持人{
/*css*/
}
聚合物({
是:“ac站点页脚”,
特性:{
smallQuery:{
类型:字符串,
值:'(最大宽度:600px)',
通知:正确
}
},
...
链接rel=“import”…
从index.html移到名为elements.html(包括polymer.html)的文件中。然后仅将elements.html导入index.html文件*/ac-*/*.html
文件都包含polymer.html的导入语句