如何设置 Ionic <ion-select> 组件的占位符文本的样式？

Question

如何在 Ionic 框架中设置<ion-select> 组件的默认/占位符文本的样式？默认文本位于 shadow root 内，因此 HTML 元素有一个“select-placeholder”类，无法通过传统 CSS 访问。

framework.com/docs/api/select#css-custom-properties

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

--placeholder-color

--placeholder-opacity

两者都可以很好地更新颜色和不透明度，但我真的很想专门更新字体粗细和字体样式，并且没有自定义属性。

Ionic team mentions 表示如果没有自定义属性，“访问元素的影子根并在 JS 中自己应用样式”。但他们没有详细说明如何做到这一点。

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

Answer 1

TLDR；将 part 属性添加到 shadow dom 内的占位符元素，然后在 css 中使用 ::part(thePartName) 设置样式。

这是我的解决方案（我不喜欢它）。顺便说一句，我正在使用 Ionic 4。

因此，最终，在某些 ionic 组件的 shadow DOM 中样式元素的问题在于，来自外部*样式样式表的传统 CSS 选择器对 shadow dom 中的元素的影响为零。这是 shadow DOM 的要点之一：创建封装的组件，其中 CSS 不会泄漏，也不会泄漏。我知道有两个例外：

1 - 使用 Ionic 的CSS variables (aka CSS Custom Properties) 之一。这些仅限于 Ionic 4 中的 --placeholder-color 和 adding --placeholder-opacity in ionic 5。我碰巧在 ionic 4 上，所以我无法利用 opacity 变量。但是，要使用这些自定义属性，您可以这样做：

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

我需要设置字体粗细、字体样式和不透明度的样式，因此我需要 CSS 自定义属性以外的其他解决方案。

1. 还有第二种方法可以在 shadow dom 中设置元素样式，那就是使用 ::part() 伪元素。

位于 Ionic 提供的 shadow dom 中的 html：

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

你的 CSS：

::part(thePartName) {
  opacity: 1;
  font-style: italic;
  font-weight: normal;
}

如果“part”HTML 属性存在于 shadow dom 内的元素上，则它就像进入 shadow dom 的入口。

但是在 Ionic 4 中，Ionic 不会将 part 属性添加到 shadow dom 中的 ion-select 组件的元素。

我使用 javascript 添加它（受@ivanreutkers 评论启发）来添加 part 属性，因此我可以在 CSS 中设置它的样式。

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

*Outside，指的是我的网站/应用程序的样式表，而不是 Ionic 提供的位于 Web 组件内部的特定样式。

Answer 2

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

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