【LWC】有关旧样式被废弃的重要提示 组件渲染相关 重要

有关旧样式废弃的重要提示

场景

最近某一天打开VSCode，发现我的许多lwc组件的HTML代码里出现了很多验证警告，警告的Message基本上说的是“该样式已更新，请使用最新的样式”。

我在StackExchange上询问这个警告是否可以关闭/无视，得到了以下回复：

Please note that the old styles were planned for deprecation this release (Summer '21). This change has been postponed, but you should not rely on these styles being usable for much longer. This is like having the Check Engine light on in your car. You’re not in immediate trouble, but if you don’t fix it soon, you’ll definitely be in trouble.

翻译成中文就是这些样式已经在当前版本（21年夏季版本）废弃了。如果不赶快换成新的样式，很可能遇到问题。

看来，必须将项目中所有废弃的样式更新为新的样式了（Salesforce基本操作有没有）

一个较快的修复方式

当然，这次样式的更新并没有什么特别复杂的变动，引用更新建议的原文为：

Realistically, all you probably need to do is search your html files for -- and selectively replace them with _ instead. Make sure you review your changes and have a backup, but this is actually a fairly “small” change in most cases.

即将样式中的 -- 替换为 _ 即可。

当然，我建议大家不要在VSCode中全局搜索 -- 然后替换，因为HTML文件中的注释也会有这个关键字。我推荐我的检索方式：

将下述关键字：

• top–

• size–

• right–

• left–

• horizontal–

• around–

• bottom–

• col–

替换为：

• to_
• size_
• right_
• left_
• horizontal_
• around_
• bottom_
• col_

上面这些关键字，是我在组件中使用到的带有双横杠的样式关键字，大家可以针对自己的项目和使用习惯，增加一些上面没有包含到的文件。记得不要忘了提交修改后的组件文件。

注意：双横杠的样式已经被废弃，虽然当前版本依然可以正常使用，但是后续版本很有可能出错，大家务必及时在各自项目组件中对应。