gpt4 book ai didi

css - 无法在媒体查询中为 shadow dom 中的元素设置样式

转载 作者:行者123 更新时间:2023-11-28 11:05:24 26 4
gpt4 key购买 nike

在我的 styles/app-theme.html 中,我试图在媒体查询中更改 paper-drawer-panel 的菜单图标大小。该元素位于 index.html 中。由于它在 shadow dom 中,我似乎无法访问它。我试过:

可能不相关,但这是 index.html:

  <template is="dom-bind" id="app">
<paper-drawer-panel force-narrow="true">
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<div id="header-v-center">
<paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>

  @media (max-width: 600px) {
iron-icon#icon::shadow {
height: 6px;
width: 5px;
}
}

  @media (max-width: 600px) {

:root {
--iron-icon-height: 6px;
--iron-icon-width: 50px;
}
}

没有成功。有什么建议么?

最佳答案

Polymer 目前使用垫片(部分 polyfill)来评估自定义属性。因此,它们不会自动重新计算。但是,您可以做的是使用 iron-media-query (或直接使用 matchMedia )知道什么时候调用 updateStyles在需要更新的元素上。

Here's an example of using updateStyles :

Polymer({

is: 'seed-element',

properties: {
largeScreen: {
type: Boolean,
observer: '_largeScreenChanged'
}
},

_largeScreenChanged: function(newValue) {
this.updateStyles({
'--h1-color': (newValue ? 'red' : 'blue')
});
}
});
<dom-module id="seed-element">
<template>
<style>
h1 {
color: var(--h1-color, red);
}
</style>

<h1>header</h1>

<iron-media-query query="(max-width: 600px)" query-matches="{{largeScreen}}"></iron-media-query>
</template>

</dom-module>

<seed-element id="topmenu"></seed-element>

关于css - 无法在媒体查询中为 shadow dom 中的元素设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36783006/

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