Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Slotted text node in scoped component is not relocated in the DOM properly when rendered with Maquette #2801

Closed
eriklharper opened this issue Jan 14, 2021 · 6 comments
Closed

Slotted text node in scoped component is not relocated in the DOM properly when rendered with Maquette #2801

eriklharper opened this issue Jan 14, 2021 · 6 comments
Assignees
@rwaskiewicz
Labels
slot-related

Comments

@eriklharper
Copy link

eriklharper commented Jan 14, 2021 •
edited
Loading

Stencil version:

 @stencil/core@2.4.0-3

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

The first calcite-label element rendered using this code reproduces this issue, which is not placing the slotted text node in the proper place in the DOM:

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/stencil-starter-project-name.esm.js"></script>
    <script nomodule src="/build/stencil-starter-project-name.js"></script>
  </head>
  <body>
    <script type="module">
      import { h, createProjector } from "https://unpkg.com/maquette@3.3.7/dist/index.js";
      document.addEventListener('DOMContentLoaded', function () {
        const domNode = document.body;
        const projector = createProjector();
        const test = {
          renderMaquette: function () {
            return h("div", [
              h("calcite-label", ["I am a text node and won't get properly relocated"]),
              h("calcite-label", [h("span", ["I am a span and will get properly relocated"])]),
            ])
          }
        };
        projector.append(domNode, test.renderMaquette);
        projector.scheduleRender();
      });
    </script>
  </body>
</html>

image

Expected behavior:

Sending in plain text (without any wrapping element) to a scoped Stencil component properly places the content in the default <slot /> position.

Steps to reproduce:

  1. git clone https://github.com/eriklharper/stencil-maquette-bug
  2. npm i && npm start
  3. Open browser developer tools and inspect both rendered calcite-label elements. Note that the first one is not placing the text content in the proper place while the second one is.

Other information:

Repro environment: https://github.com/eriklharper/stencil-maquette-bug

This is happening in the latest Chrome (87.0.4280.141), Firefox (84.0.2), Safari (14.0.2) and Brave (1.18.78) on MacOS 10.15.7

This also appears to produce very strange behavior in a larger app that is using maquette where a calcite-panel stencil element is trying to render.

Example code (JSX rendered with maquettejs):

<calcite-label class={CSS.toggleText}>
  <span class={CSS.toggleTextLabel}>{i18n.ui.includeInLegend}</span>
  <calcite-switch
    key="transparency-include-in-legend-toggle-switch"
    class={CSS.toggleButton}
    scale="s"
    switched={isChecked}
    afterCreate={(element: HTMLElement) => {
      element.addEventListener("calciteSwitchChange", () => {
        this.handleIncludeInLegendToggle();
      });
    }}
  ></calcite-switch>
</calcite-label>

Result:
image

In the testing I've been doing, this doesn't seem to affect named slots. It only appears to affect the default <slot />.
@ionitron-bot ionitron-bot bot added the triage label Jan 14, 2021
@eriklharper eriklharper mentioned this issue Jan 14, 2021
Closed
@eriklharper eriklharper mentioned this issue Jan 25, 2021
Closed
@julio8a
Copy link

julio8a commented Jan 25, 2021

@eriklharper, is there anything we can do on our end for this? or do we need to wait on Stencil?

@eriklharper
Copy link
Author

@eriklharper, is there anything we can do on our end for this? or do we need to wait on Stencil?

Yes, the workaround for this specific issue is to simply use a plain <label> in place of <calcite-label> anywhere that is having problems. Currently this workaround is in place in the areas it is affecting based on what I've seen. @AdelheidF can verify that as well on her end, but I have verified it several times and the workaround is solid for now while we wait for this fix.

@eriklharper
Copy link
Author

@ionic-team have you had a chance to triage this?

@eriklharper eriklharper mentioned this issue Mar 10, 2021
Open
@eriklharper eriklharper mentioned this issue Mar 23, 2021
Merged
@johnjenkins johnjenkins mentioned this issue Jul 1, 2021
Closed
@rwaskiewicz rwaskiewicz added bug and removed triage labels Jul 20, 2021
@rwaskiewicz rwaskiewicz self-assigned this Jul 20, 2021
@rwaskiewicz rwaskiewicz mentioned this issue Sep 3, 2021
Merged
14 tasks
@rwaskiewicz
Copy link
Contributor

I'm going to close this issue for now, as a fix for this was released in v2.8.1. Please feel free to open a new issue if this persists!

@eriklharper
Copy link
Author

@rwaskiewicz I'm still seeing the issue after upgrading Stencil to v2.9.0. I also tried it with v2.8.1, same result. Should I open a new issue or should we re-open this one? Also, could you clone my example repository and see if you see the same result as me? I just pushed the Stencil v2.9.0 update to https://github.com/eriklharper/stencil-maquette-bug

@rwaskiewicz
Copy link
Contributor

@eriklharper I put up a PR against your reproduction - I failed to mention in my comment earlier today that this fix is behind a compiler flag, scopedSlotTextContentFix, that's my fault. That's all the PR adds. That should resolve your issue, but if there are additional cases that you uncover, please do open an additional issue. Sorry about not mentioning that flag earlier!

@alicewriteswrongs alicewriteswrongs mentioned this issue Apr 19, 2023
Closed
3 tasks
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@rwaskiewicz rwaskiewicz

Labels
slot-related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(shadowDomShim): slot behaviour johnjenkins/stencil
4 participants
@eriklharper @splitinfinities @rwaskiewicz @julio8a