Javascript 自定义CSS属性在简单的演示中奇怪地覆盖了它们自己
我写了一个真正的，并为它写了完整的演示。要查看它，只需执行Javascript 自定义CSS属性在简单的演示中奇怪地覆盖了它们自己,javascript,css,polymer,polymer-1.0,web-component,Javascript,Css,Polymer,Polymer 1.0,Web Component,我写了一个真正的，并为它写了完整的演示。要查看它，只需执行bower安装热表单验证器，并使用polymer-service查看演示 我有一个奇怪的问题，因为在演示中，纸吐司的颜色是错误的 这是演示的来源。请只考虑前三个片段。请看第88、119和149行 似乎只有属性的最后一个设置被执行。然而，由于该规则的目标是一个聚合物元素，因此应保持该值 我做错了什么 <!doctype html> <html> <head> <title>hot-
bower安装热表单验证器polymer-service<!doctype html>
<html>
<head>
<title>hot-form-validator demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../hot-form-validator.html">
<!-- devDependencies -->
<link rel="import" href="../../iron-form/iron-form.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<script src="../../sinonjs/sinon.js"></script>
<style is="custom-style" include="demo-pages-shared-styles">
:root {
paper-toast {
--paper-toast-background-color: green;
--paper-toast-color: white;
};
paper-toast#secondGlobalToast {
--paper-toast-background-color: blue;
--paper-toast-color: white;
};
paper-toast#errorGlobalToast {
--paper-toast-background-color: red;
--paper-toast-color: white;
};
}
</style>
</head>
<body>
<paper-toast id="firstGlobalToast"></paper-toast>
<paper-toast id="secondGlobalToast" class="second"></paper-toast>
<paper-toast class="error" id="errorGlobalToast"></paper-toast>
<script>
sinon.log = function( m ){console.log("Message:", m)};
//var server = sinon.useFakeXMLHttpRequest()
server = sinon.fakeServerWithClock.create();
//server.autoRespond = true;
server.respondImmediately = true;
server.respondWith(
'POST',
'submit_validating', [
200,
'application/json',
'{"name":"nameField","surname":"surnameField"}'
]
);
server.respondWith(
'POST',
'submit_not_validating', [
422,
'application/json',
'{"message":"Unprocessable Entity","errors":[{"field":"maker","message":"Maker is not acceptable"}]}'
]
);
</script>
<h1>Local toasts</h1>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, passing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: white; /* This is overwritten by line 149?!? */
--paper-toast-color: white;
};
paper-toast#errorToast {
--paper-toast-background-color: red;
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, failing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: green;
--paper-toast-color: white;
};
paper-toast#errorToast {
--paper-toast-background-color: red; /* This is overwritten by line 149?!? */
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_not_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using specified toast element, passing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: gray; /* THIS influences line 119 */
--paper-toast-color: white;
};
paper-toast#secondToast {
--paper-toast-background-color: blue;
--paper-toast-color: white;
};
paper-toast.errorToast {
--paper-toast-background-color: purple;
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit toast-id="secondToast" error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="secondToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<h1>Global toasts</h1>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using global toast element, passing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using global toast element, failing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_not_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using specified global toast element, passing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast toast-id="secondGlobalToast" error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
</body>
</html>
热表单验证程序演示
：根{
烤面包{
--烤面包纸背景颜色：绿色；
--烤面包纸颜色：白色；
};
纸吐司{
--纸烤面包背景颜色：蓝色；
--烤面包纸颜色：白色；
};
纸制土司{
--纸烤面包背景颜色：红色；
--烤面包纸颜色：白色；
};
}
sinon.log=函数（m）{console.log（“消息：，m）}；
//var server=sinon.useFakeXMLHttpRequest（）
server=sinon.fakeServerWithClock.create（）；
//server.autoRespond=true；
server.respondinterly=true；
server.respondewith(
"岗位",，
“提交”[
200,
'应用程序/json'，
“{”姓名“：”姓名字段“，”姓氏“：”姓氏字段“}”
]
);
server.respondewith(
"岗位",，
“提交而不是验证”[
422,
'应用程序/json'，
“{”消息“：“无法处理的实体”，“错误“：[{”字段“：“制造者”，“消息“：“制造者不可接受”}]}”
]
);
本地祝酒
基本热表单验证程序，通过
烤面包{
--纸烤面包背景颜色：白色；/*这被第149行覆盖了*/
--烤面包纸颜色：白色；
};
纸吐司{
--纸烤面包背景颜色：红色；
--烤面包纸颜色：白色；
};
提交
基本热表单验证程序，失败
烤面包{
--烤面包纸背景颜色：绿色；
--烤面包纸颜色：白色；
};
纸吐司{
--纸烤面包背景颜色：红色；/*这被第149行覆盖了*/
--烤面包纸颜色：白色；
};
提交
基本热表单验证器，使用指定的toast元素，传递
烤面包{
--纸烤面包背景颜色：灰色；/*这影响到第119行*/
--烤面包纸颜色：白色；
};
纸吐司#二次吐司{
--纸烤面包背景颜色：蓝色；
--烤面包纸颜色：白色；
};
烤面包片{
--纸烤面包背景颜色：紫色；
--烤面包纸颜色：白色；
};
提交
全球祝酒
基本热表单验证器，使用全局toast元素，传递
提交
基本热表单验证程序，使用全局toast元素，失败
提交
基本热表单验证器，使用指定的全局toast元素，传递
提交