gpt4 book ai didi

css - Polymer 1.0 中的简单样式

转载 作者:太空宇宙 更新时间:2023-11-03 20:37:46 25 4
gpt4 key购买 nike

在对 0.5 做了一些工作后,我正试图掌握 Polymer 1.0。我正在努力解决应该 是一个非常简单的样式问题。我似乎无法将样式应用于自定义元素。

这是我的元素定义,my-element.html:

<link rel="import" href="../core/polymer/polymer.html">

<dom-module id="my-element">
<template><h1>Hello World</h1></template>
</dom-module>
<script>
Polymer({
is: 'my-element',
});
</script>

这是使用它的主页,index.html:

<!doctype html>
<html>
<head>
<script src="../core/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>

这很好用...但现在假设我想在 my-element 的实例上添加一个样式。我将此添加到 index.html:

    <style>
my-element {
margin-top: 50px;
}
</style>

没有任何反应,不增加 margin 。奇怪的是,Chrome 中的元素检查器似乎没有“看到”自定义元素,它看起来像是漂浮在页面之外并且没有包含其中包含的元素。看截图:

screenshot

我最初怀疑是 Chrome 中的错误,但在 Firefox 中也是同样的问题。

感谢任何帮助,非常感谢。

最佳答案

尝试将属性 is="custom-style" 放在样式标签上。

<style is="custom-style">
...
</style>

此外,默认情况下,元素将内联显示,但您可以通过在元素 :host 样式中应用显示属性来更改此设置。

<dom-module id="my-element">
<style>
:host {display: block;}
</style>
<template>
...
</template>
</dom-module>

关于css - Polymer 1.0 中的简单样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30552456/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com