Css 如何设置爱奥尼亚组件占位符文本的样式？

如何在Ionic框架中设置组件的默认/占位符文本的样式？默认文本在阴影根中，因此HTML元素有一个select占位符类，它不能通过传统的CSS访问

framework.com/docs/api/selectcss-custom-properties

提到的文档使用自定义属性，但只有两个自定义属性：

--placeholder-color

--placeholder-opacity

这两种方法都可以很好地更新颜色和不透明度，但我真的很想专门更新字体大小和字体样式，并且没有自定义属性

如果没有自定义属性，可以访问元素的阴影根并在JS中自己应用样式。但他们没有详细说明如何做到这一点

---

具体来说，如何在未提供自定义属性的Ionic components的阴影根中添加样式？

尝试在app.scss文件中添加以下行，如下所示：

::ng-deep {
  .select-text {
    color: white;
    ...
  }
}

ion-select {
 --placeholder-color: 'hotpink';
}

TLDR；将part属性添加到shadowdom内的占位符元素，然后在css中使用：：partthePartName设置样式

这是我的解决方案，我不喜欢。顺便说一句，我在爱奥尼亚4号

因此，最终，在某些离子组件的shadowdom中设置元素样式的问题是，来自outside*样式表的传统CSS选择器对shadowdom中的元素没有任何影响。这是shadowdom的一个要点：创建封装的组件，其中CSS不会泄漏进来也不会泄漏出去。我知道有两个例外：

1-使用爱奥尼亚的一种。在Ionic 4和中，这些颜色仅限于-占位符颜色。我碰巧在离子4上，所以我不能利用不透明度变量。但是，要使用这些自定义特性，请执行以下操作：

::ng-deep {
  .select-text {
    color: white;
    ...
  }
}

ion-select {
 --placeholder-color: 'hotpink';
}

我需要设置字体重量、字体样式和不透明度的样式，所以我需要CSS自定义属性以外的其他解决方案

还有第二种方法可以在shadowdom中设置元素的样式，那就是使用：：part伪元素。 存在于爱奥尼亚提供的阴影dom中的html：

<div part="SorryIonicDoesntAddThisAttribute" class="select-text select-placeholder>my text</div>

如果shadowdom中的元素上存在parthtml属性，那么它就像一个进入shadowdom的入口

但是，在Ionic 4中，Ionic没有将part属性添加到阴影dom中的离子选择组件的元素中

受@ivanreutkers comment的启发，我使用javascript添加了part属性，因此我可以用CSS对其进行样式化

document.getElementById("the-id").shadowRoot.querySelector(".select-placeholder").setAttribute("part", "myPartName");

---

*外面,，意思是我的网站/应用程序的样式表，而不是web组件内部的Ionic提供的特定样式。

你能给你的Ionic提供一个id吗？选择并检查document.getElementByIdthe-id.shadowRoot.querySelector.select-text.class返回什么文档？它返回“未定义”，但如果我将class更改为className，它返回2在该元素上的类：select text select placeholder因此，根据您的建议，我尝试了以下方法：document.getElementByIdmySelectBoxThing.shadowRoot.querySelector.select-text.style.color=hotpink，效果不错。但是不知道是否有更好的方法。我使用Ionic4是为了它的价值。谢谢你的建议，但是很遗憾，普通的CSS选择器无法进入阴影根。好的，你添加了吗！重要的喜欢这个颜色：白色！重要的据我所知，这不是css特殊性的问题。更重要的是，这些标志性元素位于shadow dom中，因此它们不受来自ionic web组件外部的样式的影响。此外-我在Angular中，因此我最终创建了一个属性指令，将part属性添加到shadow dom，灵感来自以下要点：