4

We're using a Stencil components library in our create-react-app to stay consistent with our digital guidelines. The components work great, most of the time... but anytime we try to conditionally render the children of the components or interact with their lifecycle, the components break.

We include the files correctly, and then in index.js, after rendering to our App component, we run

applyPolyfills().then(() => {
  defineCustomElements();
});

Example:

import React, {useState} from 'react'

export default function App() {
  const [ done, setDone ] = useState(false);

  // other code...
  
  return (
    <custom-button> {done ? "Next":"Please fill out the remaining fields."} </custom-button>
  )
}

As soon as we change done to true and the component rerenders, all the buttons break. The HTML output goes from

<custom-button color="primary" size="block" type="submit" class="hydrated">
  <!---->
  <button class="btn btn-block btn-primary" type="submit" aria-label="">
    <span class="sr-only" role="alert" aria-live="assertive"></span>
    <div style="visibility: visible;">
      Log In
    </div>
  </button>
</custom-button>

to

<custom-button color="primary" size="block" type="submit" class="hydrated">
  Next
</custom-button>

onClick functionality is gone, so is styling. Any ideas?

Adelbert Ames
  • 364
  • 1
  • 3
  • 8
  • Is your `custom-button` component not using `shadow: true` by any chance? You could try to enable some of the extra options, like `slotChildNodesFix`, `appendChildSlotFix` or `cloneNodeFix` (see https://stenciljs.com/docs/config-extras). – Simon Hänisch Aug 25 '20 at 15:04

0 Answers0