If I follow the example in <a href="https://preactjs.com/guide/v10/web-components/#pas

Looks like this is a documented issue with Custom Elements: <a href="https://developer

Slots fail to pass as props when element is created after register() is called about preact-custom-element HOT 3 OPEN

preactjs commented on May 17, 2024

Slots fail to pass as props when element is created after register() is called

from preact-custom-element.

Comments (3)

effulgentsia commented on May 17, 2024

Additional info...

This FAILS (meaning, the slots DON'T pass as props and therefore aren't rendered):

<html>
<head><script src="test.js"></script></head>
<body><div id="wrapper">
  <text-section>
    <span slot="heading">Nice heading</span>
    <span slot="content">Great content</span>
  </text-section>
</div></body>
</html>

This also FAILS:

<html>
<head><script src="test.js"></script></head>
<body><div id="wrapper">
  <script>
    document.write(`
      <text-section>
        <span slot="heading">Nice heading</span>
        <span slot="content">Great content</span>
      </text-section>
    `)
  </script>
</div></body>
</html>

However, this PASSES (meaning, the slots DO get passed as props and are rendered):

<html>
<head><script src="test.js"></script></head>
<body>
  <div id="wrapper"></div>
  <script>
    wrapper.innerHTML = `
      <text-section>
        <span slot="heading">Nice heading</span>
        <span slot="content">Great content</span>
      </text-section>
    `
  </script>
</body>
</html>

from preact-custom-element.

blopker commented on May 17, 2024

I've just run into this as well when I took defer out of the script tag in my head section. To be fair, I don't need it at this point since all my custom elements are there when the page loads, but this is surprising behavior. Aside from slots, everything else seemed to work.

Edit: For completeness, I'm using { shadow: false } when registering.
Edit2: The issue is the same for { shadow: true }

from preact-custom-element.

blopker commented on May 17, 2024

Looks like this is a documented issue with Custom Elements: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements

Note that in this case we must ensure that the script defining our custom element is executed after the DOM has been fully parsed, because connectedCallback() is called as soon as the expanding list is added to the DOM, and at that point its children have not been added yet, so the querySelectorAll() calls will not find any items. One way to ensure this is to add the defer attribute to the line that includes the script.

Looks like if the Custom Element is added to the DOM after the first pass then it works fine. The issue is when an element is already registered, then connectedCallback is triggered immediately when the Custom Element tag is found, but before the children are parsed. This is why setting innerHTML on an element that was already parsed works, but using document.write to append a CE before the first DOM pass happens, fails.

Since we should all be using defer in our script tags to avoid blocking the DOM anyway, this feels like a non-issue to me. Maybe it's worth documenting though? One suggestion I saw was to put a setTimeout(0) in connectedCallback to slightly defer until the element's children were parsed, but I'm not sure if that actually works.

from preact-custom-element.

Slots fail to pass as props when element is created after register() is called about preact-custom-element HOT 3 OPEN

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent