自定义链接组件行内间距

Question

我正在创建一个基于 lit web 组件的组件库。然而，我怀疑我的问题与 Lit 本身无关，而是与 Shadow dom 有关。

我的链接组件具有以下样式，并且仅在内部呈现锚标记：

// link.component.scss
:host {
  display: contents;
}

.my-link {
  display: inline;
  height: auto;
  width: auto;
}

// link.component.ts
override render() {
    return html`
        <a class="my-link"><slot></slot></a>
    `
}

当我尝试使用文本中的链接时，我在不应该有空格的地方添加了一些空格（至少 HTML 标准锚标记不存在空格）：

<div style="display: block;">
    A sentence that ends with a <my-link>link</my-link>.
</div>
<div style="display: block;">
    A sentence that ends with a <a href='/'>link</a>.
</div>

这会产生以下结果：

我尝试了代码和不同的“显示”属性，但我需要我的链接为“显示：内联”，因为它应该与文本一起中断和流动。

任何帮助表示赞赏:)

Answer 1

问题是 render() 方法中的间距。通过使用修复：

override render() {
    return html`<a class="my-link"><slot></slot></a>`
}

感谢 fen1x 或评论:)