JSFiddle - React, Tailwind, and code Playground

HTML

<test-element>
  This element should have a natural height.
  
  <div style="height: 300px;"></div>
  
  I should be able to see this text on a green background.
</test-element>

CSS

test-element {
  width: 200px;
  background: green;
}

JavaScript

window.customElements.define('test-element', class TestElement extends HTMLElement {
	constructor() {
  	super()
    
    let contents = `
      <style>
        :host {
          display: block;
        }
        :host([hidden]) {
          display: none;
        }
      </style>`

		// convert string to nodes
    let template = document.createElement('template')
    template.innerHTML = contents

		// create shadow
    this.attachShadow({mode: 'open'})
    
    // insert nodes
    this.shadowRoot.appendChild(template.content.cloneNode(true))
  }
})