我来帮你排查下这个问题～你遇到的核心问题是Shadow DOM的样式隔离机制，普通的CSS选择器（包括你用的属性选择器[part='input-field']）没法直接穿透到Shadow DOM内部，得用Shadow DOM专门提供的::part()伪元素选择器来定位组件暴露的内部元素。

修正后的代码 #

把你的选择器改成::part()语法，就能正确选中Vaadin文本框的input-field部分了：

<link rel="import" href="../../bower_components/polymer/lib/elements/custom-style.html">
<custom-style>
  <style is="custom-style">
    vaadin-text-field::part(input-field) {
      display: none;
    }
  </style>
</custom-style>

额外注意事项 #

• 确认你的Vaadin组件版本支持::part：较新的Vaadin元素都实现了Shadow DOM的Part API，如果你用的是旧版本，可能需要升级组件。
• 样式优先级问题：如果组件内部的默认样式优先级更高，可以尝试添加!important临时验证（但不推荐长期使用，建议尽量通过正确的选择器权重覆盖）。
• 如果你是在Polymer组件内部使用，也可以考虑在组件的<template>里直接写针对Shadow DOM的样式，但全局样式的话用custom-style配合::part是更合适的方式。

内容的提问来源于stack exchange，提问作者batgerel.e