[WICG/webcomponents] why are gaps between custom-element using shadow root (Issue #947)

As you can see in the image below

![image](https://user-images.githubusercontent.com/22289445/147253643-78b341c7-98ff-48e2-aa53-0edaa3b36370.png)

JavaScript

```js
const template = document.createElement('template');

template.innerHTML = `
  <style>
    :host {
        border-radius: 3px;
    }
  </style>
  <slot></slot>
`;

class TestComponent extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'closed' });
        const content = template.content.cloneNode(true);
        shadow.appendChild(content);
    }
}

window.customElements.define('text-component', TestComponent);
```

```html
<html>
    <body>
        <div>
            qwe
            <text-component style="background-color: red; color: #fff">
                test-component
            </text-component>
            asd
        </div>
        <script src="./index.js"></script>
    </body>
</html>
```
i am really confused about that, who can help me?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/947
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/947@github.com>

Received on Thursday, 23 December 2021 14:31:27 UTC