我们目前使用CSS类来匹配文件图标和文件名。使用attribute selectors可以简化这个过程，并允许支持名称模式。
nc1teljy1#
非常好。我喜欢这个将主题键的繁重工作移回到文件图标侧的操作。小提示：
iconLabel.ts
data-
如果我们不这样做，我们在开发者工具控制台中会收到⚠警告。
[attr*="selector"]
*selector*
我想我可能在 #12493 中想到了这个，但没有设计或草图出来。我想我只是过于专注于以线性时间实现原始用例😄
bkhjykvo2#
感谢@zm-cttae。我同意你所有的观点！是的，这个想法是模式也可以用于扩展。仍然需要澄清的是我们如何处理多段扩展：hello.test.ts。现在我们生成多个类名test.ts-ext-file-icon和ts-ext-file-icon,图标主题可以再次匹配ts或test.ts。也许可以将点移动到扩展内部，并使用$来匹配？<div data-basename="hello" ext=".json">hello.ts</div><div data-basename="hello" ext=".test.json">hello.test.ts</div>
hello.test.ts
test.ts-ext-file-icon
ts-ext-file-icon
ts
test.ts
$
<div data-basename="hello" ext=".json">hello.ts</div>
<div data-basename="hello" ext=".test.json">hello.test.ts</div>
/* extension: "ts" */ [data-ext$=".ts"] { background-color: red; } /* extension: "test.ts" */ [data-ext$=".test.ts"] { background-color: blue; }
然而，这将限制在扩展中使用的模式。
3z6pesqy3#
我们可以使用数据属性和扩展类来覆盖全部功能，是吗？很糟糕，我们不能在一个里面做到。
ds97pgxw4#
你想让我再尝试重构#174286,看看是否可行吗？
4条答案
按热度按时间nc1teljy1#
非常好。我喜欢这个将主题键的繁重工作移回到文件图标侧的操作。小提示：
iconLabel.ts中贡献的属性需要使用data-属性以保证HTML5语义正确性。如果我们不这样做，我们在开发者工具控制台中会收到⚠警告。
[attr*="selector"]支持周围的通配符(如*selector*)我想我可能在 #12493 中想到了这个，但没有设计或草图出来。
我想我只是过于专注于以线性时间实现原始用例😄
bkhjykvo2#
感谢@zm-cttae。我同意你所有的观点！
是的，这个想法是模式也可以用于扩展。
仍然需要澄清的是我们如何处理多段扩展：
hello.test.ts。现在我们生成多个类名test.ts-ext-file-icon和ts-ext-file-icon,图标主题可以再次匹配ts或test.ts。也许可以将点移动到扩展内部，并使用
$来匹配？<div data-basename="hello" ext=".json">hello.ts</div><div data-basename="hello" ext=".test.json">hello.test.ts</div>然而，这将限制在扩展中使用的模式。
3z6pesqy3#
我们可以使用数据属性和扩展类来覆盖全部功能，是吗？很糟糕，我们不能在一个里面做到。
ds97pgxw4#
你想让我再尝试重构#174286,看看是否可行吗？