个人中心
gpt4 book ai didi

javascript - 多个 Polymer Web 组件在 Firefox 中失败

转载 作者：搜寻专家 更新时间：2023-11-01 04:36:02 24 4
gpt4 key购买 nike

我已经使用多个自定义组件在 Chrome 中成功构建了一个网站，一切都按预期工作。

如果我在演示页面上一次运行一个组件，它会在 Firefox 上呈现。现在在使用多个自定义组件进行跨浏览器测试时，使用 Firefox v41 时它们都无法呈现*。 (虽然 1 次快速刷新有一些组件出现；侥幸？)

*我说的渲染失败是指dom中的内容显示在页面上，但似乎没有转换到shadow dom中，也没有继承自定义组件中定义的样式或功能，而只是从索引文件继承样式。

如何让多个 dom 模块呈现在 Firefox 的一个页面上？

错误日志:

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>

最佳答案

  1. 将所有 link rel="import"... 从 index.html 移动到一个名为 elements.html 的文件(包括 polymer.html)。然后仅将 elements.html 导入你的 index.html 文件。

  2. 如果以上方法不起作用，请从您的 elements.html 文件中删除 import polymer.html 并确保所有 */ac-*/*.html 文件都包含用于polymer.html.

关于javascript - 多个 Polymer Web 组件在 Firefox 中失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33290769/

24 4 0
文章推荐： javascript - 我在 API 响应中收到一个对象数组，它是嵌套数组。我想通过 ID 查找对象
文章推荐： iphone - 在 Assets 库中写入视频然后获取其属性的正确方法是什么
文章推荐： ios - 适用于 iOS 的基于 XML 的布局
文章推荐： javascript - 如何手动调度 React Synthetic Events？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com