I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM.
Within my link component, I have defined specific styles that only render an anchor tag inside:
// 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>
`
}
However, when I attempt to use the link within text, extra spaces are being added where they should not be (positioning wise):
<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>
This issue leads to the following outcome: https://i.sstatic.net/8KlwF.png
I have tried adjusting the code and experimenting with different "display" properties, but I specifically require my link to be set as "display: inline" in order for it to interact properly with text flow.
If you have any suggestions or solutions, your help would be greatly appreciated :)