nolanlawson/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Truly reduced repro of Firefox shadow style issue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
      pre {
          position: fixed;
          right: 0;
          top: 0;
          padding: 20px;
          background: rgba(30, 30, 30, 0.8);
          color: white;
          pointer-events: none;
      }
  </style>
</head>
<body>
<h1>Truly reduced repro of Firefox shadow style issue</h1>
<my-parent></my-parent>
<pre></pre>
<script type="module">

  class Parent extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <style type="text/css">div { margin-left: 10px; }</style>
        <div>I am in parent</div>
        <my-child></my-child>
      `
    }
  }

  class Child extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <div>I am in child</div>
      `
    }
  }

  class MyComponent extends HTMLElement {
    toggled = false

    constructor() {
      super()
      this.attachShadow({mode: 'open'})
      this.shadowRoot.innerHTML = '<div>hello world</div>'
      this.render()
    }

    toggle() {
      this.toggled = !this.toggled
      this.render()
    }

    render() {
      let style = this.shadowRoot.querySelector('style')
      let div = this.shadowRoot.querySelector('div')
      if (style) {
        this.shadowRoot.removeChild(style)
      }
      if (div) {
        this.shadowRoot.removeChild(div)
      }
      style = document.createElement('style')
      style.type = 'text/css'
      this.shadowRoot.insertBefore(style, null)
      const styleText = document.createTextNode(this.toggled ? 'div { margin-right: 10px; }' : 'div { margin-left: 10px; }')
      style.insertBefore(styleText, null)
      div = document.createElement('div')
      this.shadowRoot.insertBefore(div, null)
      const divText = document.createTextNode('hello world')
      div.insertBefore(divText, null)
    }
  }
  customElements.define('my-component', MyComponent)
  customElements.define('my-parent', Parent)
  customElements.define('my-child', Child)

  const component = new MyComponent()
  document.body.appendChild(component)

  const log = str => {
    document.querySelector('pre').textContent += str + '\n'
  }

  const logStyle = () => {
    const div = component.shadowRoot.querySelector('div')
    log(`margin-left: ${getComputedStyle(div).marginLeft}, margin-right: ${getComputedStyle(div).marginRight}`)
  }

  logStyle()
  component.toggle()
  logStyle()
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Truly reduced repro of Firefox shadow style issue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	pre {
	position: fixed;
	right: 0;
	top: 0;
	padding: 20px;
	background: rgba(30, 30, 30, 0.8);
	color: white;
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<h1>Truly reduced repro of Firefox shadow style issue</h1>
	<my-parent></my-parent>
	<pre></pre>
	<script type="module">

	class Parent extends HTMLElement {
	constructor() {
	super()
	this.attachShadow({ mode: 'open' }).innerHTML = `
	<style type="text/css">div { margin-left: 10px; }</style>
	<div>I am in parent</div>
	<my-child></my-child>
	`
	}
	}

	class Child extends HTMLElement {
	constructor() {
	super()
	this.attachShadow({ mode: 'open' }).innerHTML = `
	<div>I am in child</div>
	`
	}
	}

	class MyComponent extends HTMLElement {
	toggled = false

	constructor() {
	super()
	this.attachShadow({mode: 'open'})
	this.shadowRoot.innerHTML = '<div>hello world</div>'
	this.render()
	}

	toggle() {
	this.toggled = !this.toggled
	this.render()
	}

	render() {
	let style = this.shadowRoot.querySelector('style')
	let div = this.shadowRoot.querySelector('div')
	if (style) {
	this.shadowRoot.removeChild(style)
	}
	if (div) {
	this.shadowRoot.removeChild(div)
	}
	style = document.createElement('style')
	style.type = 'text/css'
	this.shadowRoot.insertBefore(style, null)
	const styleText = document.createTextNode(this.toggled ? 'div { margin-right: 10px; }' : 'div { margin-left: 10px; }')
	style.insertBefore(styleText, null)
	div = document.createElement('div')
	this.shadowRoot.insertBefore(div, null)
	const divText = document.createTextNode('hello world')
	div.insertBefore(divText, null)
	}
	}
	customElements.define('my-component', MyComponent)
	customElements.define('my-parent', Parent)
	customElements.define('my-child', Child)

	const component = new MyComponent()
	document.body.appendChild(component)

	const log = str => {
	document.querySelector('pre').textContent += str + '\n'
	}

	const logStyle = () => {
	const div = component.shadowRoot.querySelector('div')
	log(`margin-left: ${getComputedStyle(div).marginLeft}, margin-right: ${getComputedStyle(div).marginRight}`)
	}

	logStyle()
	component.toggle()
	logStyle()
	</script>

	</body>
	</html>