Custom Component

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <style>
      * {
          border: none;
          margin: 0;
          outline: none;
          padding: 0;
        }
    </style>
    
    <template id="tpllink">
          <link rel="stylesheet" href="style-link.css" onload="log()">
          <div class="testlink"><slot></slot></div>
    </template>
    
    <div id="link">
      <h4>link rel</h4>
    </div>

    
    <div id="inline">
      <h4>inline style</h4>
    </div>
    
    <template id="tplinline">
          <style>
            * {
              border: 0;
              margin: 0;
              outline: 0;
              padding: 0;
            }
            
            :host {
              display: block;
              contain: content;
              position: relative;
            }
            
            .testinline {
              background: green;
              height: 200px;
            }
            
            div {
              border: 1px dashed white;
              box-sizing: border-box;
            }
          </style>
          <div class="testinline">
            <slot></slot>
            <p id="height"></p>
          </div>
    </template>    
    
    <script src="index.js"></script>
  </body>

</html>

* {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

:host {
  display: block;
  contain: content;
  position: relative;
}

.testlink {
  background: lime;
  height: 200px;
}

div {
  border: 2px dotted orange;
  box-sizing: border-box;
}

// set up a style with a style tag
inline.attachShadow({mode: 'open'}).append(tplinline.content.cloneNode(true));
inline.append(`Height: host ${inline.scrollHeight},
div computed height - ${window.getComputedStyle(inline.shadowRoot.querySelector('.testinline')).height}`);

// set up a style with a link rel
link.attachShadow({mode: 'open'}).append(tpllink.content.cloneNode(true));
link.append(`Height: host ${link.scrollHeight},
div computed height - ${window.getComputedStyle(link.shadowRoot.querySelector('.testlink')).height}`);

function log() {
  link.append(`; Height after link load: host ${link.scrollHeight},
div computed height - ${window.getComputedStyle(link.shadowRoot.querySelector('.testlink')).height}`);
}