在自定义元素中使用<纸材料>元素
我正在玩聚合物启动工具包，并创建一个嵌套的自定义元素。我有一个外部元素，它多次“输出”内部元素。
我的问题是，内部元素(名片)包含一个<paper-material>。此元素不受全局样式的影响。我知道聚合物向元素中添加了一类scoped-style，这确保了它只能影响本地DOM。删除Dev工具中的scoped-style类将应用全局样式。
如何将标准<paper-element>中的样式应用于嵌套元素，或在自定义元素中包含这些相同的样式。
编辑
看来，我的问题是‘app主题’中的样式没有应用到内部元素。如果我复制<paper-element>样式(包括媒体查询)，再按照@Zikes的答案执行，我就可以得到想要的结果。
当元素已经完美的时候，从一个元素中复制所有的东西似乎违背了聚合物的模块化性质。我是不是遗漏了什么？
business-card.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<dom-module id="business-card">
<style>
:host {
display: block;
}
</style>
<template>
<paper-material>
<content></content>
</paper-material>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'business-card'
});
})();
</script>任何帮助都很感激
回答 2
Stack Overflow用户
发布于 2015-06-26 08:37:57
聚合物保护元素内部不受文档样式的影响，反之亦然。这是CSS的作用域，它是Web组件的一个突出特性。
在简单的示例中，这似乎是有问题的，但通常情况下，组件样式不会相互攻击，文档样式不会无意中弄糟组件，这对组件重用非常有益。
在其他作用域中使用app-theme.html并不理想，但是您可以做的一件事是将要使用的样式规则复制到CSS文件中，然后在元素代码中导入该CSS文件，如下所示。导入和样式被有效地使用(例如，导入只加载一次，即使您在多个元素中使用它)。
<dom-module id="business-card">
<link rel="import" type="css" href="theme-styles.css">
<style>
:host {
display: block;
}
</style>
<template>
<paper-material>
<content></content>
</paper-material>
</template>
<script>
Polymer({
is: 'business-card'
});
</script>
</dom-module>实例：http://jsbin.com/hojajo/edit?html,output
Stack Overflow用户
发布于 2015-06-25 17:29:42
如果您想直接将paper-material效果应用于您的元素，可以这样做：
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">
<dom-module id="business-card">
<style>
:host {
display: block;
position: relative;
@apply(--shadow-transition);
}
:host([elevation="1"]) {
@apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
@apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
@apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
@apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
@apply(--shadow-elevation-16dp);
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'business-card',
properties: {
/**
* The z-depth of this element, from 0-5. Setting to 0 will remove the
* shadow, and each increasing number greater than 0 will be "deeper"
* than the last.
*
* @attribute elevation
* @type number
* @default 1
*/
elevation: {
type: Number,
reflectToAttribute: true,
value: 1
},
/**
* Set this to true to animate the shadow when setting a new
* `elevation` value.
*
* @attribute animated
* @type boolean
* @default false
*/
animated: {
type: Boolean,
reflectToAttribute: true,
value: false
}
}
});
</script>这是从paper-material代码本身复制的：https://github.com/PolymerElements/paper-material/blob/master/paper-material.html
https://stackoverflow.com/questions/31056709
复制相似问题
腾讯云开发者
