webcomponents/shadycss

Elements with styled shadowRoots are rendered incorrectly when prepareTemplate is called lazily

sorvell opened this issue · 0 comments

The setup is a little arcane but this can happen when:

  1. a custom element x-foo is defined and creates a shadowRoot but doesn't render anything to it and does not yet call ShadyCSS.prepareTemplate (e.g. a LitElement initially has shouldRender: false).
  2. another element up the tree calls ShadyCSS.styleSubtree(). This will create style information for x-foo that references no styles.
  3. then ShadyCSS.prepareTemplate is called for x-foo (e.g. its shouldRender becomes true and it renders the first time)
  4. then any call to ShadyCSS.styleElement for x-foo will not contain this new styling.

To address this, perhaps at https://github.com/webcomponents/shadycss/blob/master/src/scoping-shim.js#L151 we can only actually store the styleInfo if prepareTemplate has been called for this scope.