【发布时间】：2014-12-15 08:54:25
【问题描述】：
所以，我知道 Web 组件、Shadow DOM 等仅在今天的 Chrome 中本地实现。
为了支持 Firefox，需要使用 Polyfill。根据该网站，Polymer 在 Firefox 中支持 polyfill：
https://www.polymer-project.org/resources/compatibility.html
但是当我制作了一个非常简单的页面时，它在 Firefox 中看起来完全搞砸了。但是，如果我在 Firefox 中尝试 Polymer website，它可以在那里正常工作。
测试网址：http://misc.snapcode.se/polymer/
这是我的测试站点在 Chrome 中的外观：
在 Firefox 中：
代码如下所示。
- 但他们说 Firefox 支持 Polyfill，并且支持 CSS，那么为什么布局/设计如此糟糕？
- 他们为什么让自己的网站在 Firefox 中运行，但我构建的一个超级简单的网站却搞砸了？ 1234563搞砸了。为什么？
我错过了什么？
编辑 1 我发现要让 Firefox 中的标题面板“正确”，我必须删除 index.php 中 div {...} 的 CSS：
在我看来，Shadow DOM 无法正常工作，即使我已经导入了 webcomponents.js，这应该是所需的 Polyfill。
编辑 2
我使用 Firebug 查看了 Firefox，我可以看到以下内容：
如我所见，webcomponents.min.js 被导入（我测试了不同的 js 文件），还有一些关于 ShadowDOMPolyfill 的东西。所以，我觉得现在更奇怪了。
编辑 3 我使用 Firebug 调试了 Firefox，如下图所示。如我所见，使用 Polyfill 的 ShadowDOM 确实被检测到并使用了。你同意？ =)
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/font-roboto/roboto.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>assignment-card.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">
<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">
<polymer-element name="assignment-card">
<template>
<style>
input {
padding: 10px;
font-family: 'RobotoDraft', sans-serif;
font-size: 16px;
margin: 0px;
}
core-icon[icon="error"] {
width: 40px;
height: 40px;
color: red;
}
core-icon[icon="perm-identity"] {
width: 40px;
height: 40px;
}
core-icon[icon="lock-outline"] {
width: 40px;
height: 40px;
}
core-icon[icon="arrow-forward"] {
color: #e4e4e4;
}
core-icon {
color: #808080;
}
paper-button {
background-color: #6fd177;
margin: 0px;
}
core-field {
margin-bottom: 10px;
}
div[id="container"] {
background: #C0C0C0;
padding: 5px;
}
div
{
margin: 10px;
font-size: 12px;
}
</style>
<div id="container" layout vertical >
<div layout horizontal>
<core-label >Starttid: 14:13</core-label>
<core-label flex></core-label>
<core-label >Uppdrags-id: 13213241</core-label>
</div>
<div><core-label>Kertin Karlsson,</core-label></div>
<div layout horizontal relative>
<paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
<paper-dropdown class="dropdown" layered="true">
<core-menu class="menu">
<template repeat="{{assistant in assistants}}">
<paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>Tilldela</paper-button>
</div>
</div>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/relay.php"
method="post"
params='{{json}}'
handleAs="json"
on-core-response="{{handleResponse}}">
</core-ajax>
</template>
<script>
Polymer('assignment-card', {
ready: function() {
this.assistants = [
{id: 1, name: 'Kalle'},
{id: 2, name: 'Ted'},
{id: 3, name: 'Micke'},
{id: 4, name: 'Bengt'},
];
}
});
</script>
</polymer-element>logout-button.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<polymer-element name="logout-button">
<template>
<style>
paper-button
{
background: #DF0101;
color: white;
}
</style>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/logout.php"
on-core-response="{{handleResponse}}">
</core-ajax>
<paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut
<core-icon icon="highlight-remove"></core-icon>
</paper-button>
</template>
<script>
Polymer('logout-button', {
onLogoutClicked: function()
{
this.$.coreAjax1.go();
},
handleResponse: function(e)
{
document.location.href = '/index.php';
}
});
</script>
</polymer-element>【问题讨论】：
-
如果您包含测试页面的 URL，人们会更容易回答。
标签： css google-chrome firefox polymer web-component