Whitespace Issue?

components.base-component-no-whitespace\.js

import Component from '@glimmer/component';

export default class extends Component {
}

components.base-component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

components.derived-component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>

<h2>Base component</h2>
<p>This is a test in which the <BaseComponent @isLink={{true}} href="https://emberjs.com">link</BaseComponent> is inline with some text, created using the <code>BaseComponent</code> component.</p>

<p><em>Notice how after the word "link" there is a extra underlined space: this is caused by the "whitespace" added by handlebars.</em></p>

<img width="300" alt="img1" src="https://user-images.githubusercontent.com/686239/167466927-34c448dc-4237-4999-a222-856d5301d5ff.png" style="border: 1px dotted #999">

<p>If you inspect the element in the devtools and "edit as HTML" what you will see is this:</p>

<img width="260" alt="screenshot_1422" src="https://user-images.githubusercontent.com/686239/167467341-ab14783e-0100-4c2c-a9ae-5f5b7697c04a.png" style="border: 1px dotted #999">

<p>What you can see is whitespace before and after the word. And the browser adds an underline to it (following its own internal heutistics, I suspect: in fact in the screenshot you will see that there is also space after the <code>&lt;a&gt;</code> tag, before the <code>"is inline"</code> words).</p>

<h2>Base component with stripped whitespace</h2>
<p>Also a test in which the <BaseComponentNoWhitespace @isLink={{true}} href="https://emberjs.com">link</BaseComponentNoWhitespace> is inline with some text, but this time created using the <code>BaseComponentNoWhitespace</code> component.</p>

<p><em>Notice how in this case there is <strong>no underlined</strong> space after the word "link": this is because we have stripped the "whitespace" in handlebars using <a href="https://handlebarsjs.com/guide/expressions.html#whitespace-control">the "~" operator</a>.</em></p>


<h2>So.. problem solved? Not quite :(</h2>

<p>Let's imagine this <code>BaseComponent</code> is used in another component (via composition: components are made to be composed!)</p>

<p>You can see here a test in which the <DerivedComponent @isLink={{true}} href="https://emberjs.com">link</DerivedComponent> is inline with some text, this time created using the  <code>DerivedComponent</code> component.</p>

<p>🚨 You will notice that <strong>the underlined space after the word "link" has re-appeared</strong>: this is because now the <code>DerivedComponent</code> is adding whitespace!</p>

<p>Not only, now there is <strong>even more "stuff"</strong> added to the HTML, before and after the "link" text:</p>

<img width="265" alt="screenshot_1423" src="https://user-images.githubusercontent.com/686239/167468986-4d1aba54-b3e2-47da-a550-fab27c0fa993.png">

<p>⁉️ <strong>So, because we don't know how/where the compoents in our design system will be combined, in theory we should add stripping operators (<code>~</code>) everywhere?? in almost every component (just to be sure)?</strong></p>

templates.components.base-component-no-whitespace\.hbs

{{~#if @isLink~}}
  <a ...attributes>
    {{~yield~}}
  </a>
{{~else~}}
  <button type="button" ...attributes>
    {{~yield~}}
  </button>
{{~/if~}}

templates.components.base-component\.hbs

{{#if @isLink}}
  <a ...attributes>
    {{yield}}
  </a>
{{else}}
  <button type="button" ...attributes>
    {{yield}}
  </button>
{{/if}}

templates.components.derived-component\.hbs

<BaseComponent @isLink={{@isLink}} ...attributes>
  {{#if @leadingIcon}}
    <span>Imagine some code for icon here</span>
  {{/if}}
  {{yield}}
  {{#if @trailingIcon}}
    <span>Imagine some code for icon here</span>
  {{/if}}
</BaseComponent>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}

uploading here images so I can link them in the twiddle: https://ember-twiddle.com/3575bcb7229f8c689339408eb0dcbed2