从外部设计Web组件样式时如何避免复制粘贴？

Question

说，我正在使用＆lt; core-input＆gt;在我的Web组件中，我想设置＆lt; input＆gt;的样式＆lt; core-input＆gt;内的元素。 为此，我需要做

<style>
  :host::shadow input {
    background-color: green
  }
</style>

现在，选择器还可以，但我不想在这里定义样式属性，因为我有一个由设计人员制作的CSS文件，如下所示：

.input-like-things {
  background-color: green
}

另一方面，设计人员不会为我使用的每个看起来像输入的Web组件生成几乎相同的CSS文件。

如何正确应用＆＃34; .input-like-things＆＃34;类（或其内容）到＆lt; input＆gt;里面的字段＆lt; core-input＆gt;？

我不考虑/深/作为一种选择。

我创建了一个自定义组件，可以复制＆＃34; .input-like-things＆＃34;进入＆lt; style＆gt;类标签，这是有效的，但只在Chrome中。只要数据绑定在＆lt; style＆gt;内部无效，我就无法在Firefox中使用它。在ShadowDOM polyfill中。

帮助？