gpt4 book ai didi

css - 将自定义元素解析为 shady dom 树后,不会应用自定义 css 属性

转载 作者:行者123 更新时间:2023-11-28 07:07:04 25 4
gpt4 key购买 nike

下面是一个示例 polymer 元素

<dom-module id="custom-dialog">
<style>
#text{
width: 400px;
height: 50px;
position: relative;
background: #fff;
}
p{
position: absolute;
margin: var(--ui-connectionDialog-text-margin, 5% 30%);
font-size: var(--ui-connectionDialog-text-font-size, 18px);
}
</style>

<template>
<!-- local DOM for your element -->
<div id = "text" > <p><content></content></p> </div>

</template>
</dom-module>

以及使用自定义 css 设置样式的示例

<style>
custom-dialog.connecting
{
--custom-dialog-text-font-size: 23px;
--custom-dialog-text-margin: 3.8% 30%;
}

custom-dialog.disconnected
{
--custom-dialog-text-font-size: 20px;
--custom-dialog-text-margin: 3.8% 30%;
}
</style>
<body>
<custom-dialog class="connecting">Connecting</custom-dialog>
</body>

我能够通过 connecting 应用自定义 css 属性class 属性,但是当我使用 js 将自定义元素的类更改为 disconnected 时, 不应用新的 css 属性。事实上,当类属性改回 connecting 时, 相应的 css 属性也不适用。

我怀疑这是由于我的浏览器在 shady-dom 模式下运行的脸,并且 poly 填充中存在间隙。

我很想直接将 css 属性应用到 <p> 上元素在 shady-dom 中,但它想知道是否有适当的方法来处理这个问题。

最佳答案

根据 polymer 文档“仅应用在创建时匹配元素的规则。不会自动应用更新变量值的任何动态更改。”

https://www.polymer-project.org/1.0/docs/devguide/styling.html

“由于 DOM 的更改,当前不会发生自定义属性样式的重新评估。可以通过在 Polymer 元素上调用 this.updateStyles() 来强制重新评估(或 Polymer.updateStyles() 以更新所有元素样式)。例如,如果类 b 被添加到上面的 x-foo,范围必须调用 this.updateStyles() 来应用样式。这从这一点开始重新计算/应用树下的样式。”

.. 最好解释您的问题,这是您问题的官方解决方法。您应该在应用断开连接的类后调用 this.updateStyles()。

关于css - 将自定义元素解析为 shady dom 树后,不会应用自定义 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32880126/

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