Chrome 109自定义标签样式失效：原因排查及保留标签的修复方案

从2021年4月起，我在Chrome中使用以下HTML和CSS代码，此前一直正常运行：

<head>
    <style>
        x-sentence {
            border-bottom: solid;
        }

        x-word {
            display: inline-flex;
            flex-direction: column-reverse;
        }

        x-word::after {
            content: '🌍';
        }
    </style>
</head>
<body>
    <x-sentence>
        <x-word>Hello world</x-word> nice view <x-word>there</x-word>
    </x-sentence>
</body>

这段代码在Safari（macOS和iOS端）以及Chrome旧版本（如2022年11月28日发布的107版本）中均可正常工作，但在Chrome 109版本中失效。

需要说明的是：将自定义标签替换为非自定义标签（比如把<x-sentence>改为<div class='x-sentence'>）可以解决border-bottom的问题，但即便将<x-word>改为<span class='x-word'>，"nice view"文本依然会出现对齐错误。由于我使用自定义标签是为了避免Chrome扩展和Safari扩展与页面的CSS样式冲突，因此希望在保留自定义标签的前提下解决问题。

请问这是Chrome 109引入的Bug，还是我依赖了自定义标签的非标准HTML行为？是否可以在保留自定义标签的前提下修复该问题？

2023年1月28日更新：问题已解决，添加以下CSS代码即可恢复Chrome 109之前的运行效果：

vertical-align: ${guideOnTop ? 'text-bottom' : 'baseline'};

该代码在Safari中无副作用，同样可正常运行。

内容的提问来源于stack exchange，提问作者Michael Buen