Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

bug: [React] when updating the slot content the component looses it's style #393

Closed
3 tasks done
pedroresende opened this issue Sep 28, 2023 · 5 comments
Closed
3 tasks done

bug: [React] when updating the slot content the component looses it's style #393

pedroresende opened this issue Sep 28, 2023 · 5 comments
Labels
triage

Comments

@pedroresende
Copy link

Prerequisites

Stencil Version

4.3.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.5.3

Current Behavior

If the content of the slot is replaced after the element is created the element looses it's style

Screen.Recording.2023-09-28.at.09.27.40.mp4

Expected Behavior

To update the slot content and the wrapper to continue to work as expected

Steps to Reproduce

  1. Add a stencil webcomponent with a slot with provided content
  2. Replaced the content of the slot
import Head from "next/head";
import { MyButton } from "@pedroresende/css-error";
import { useState, useEffect } from "react";

export default function Home() {
  const [hasLoaded, setLoaded] = useState(false);
  const [buttonText, setButtonText] = useState("hi");

  useEffect(() => {
    if (!hasLoaded && typeof window !== undefined) {
      setLoaded(true);
    }
  }, [hasLoaded]);

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p style={{ margin: "10px" }}>
          <input
            onChange={(e) => {
              setButtonText(e.target.value);
            }}
            defaultValue={buttonText}
          />
        </p>
        {hasLoaded && <MyButton>{buttonText}</MyButton>}
      </main>
    </>
  );
}

Code Reproduction URL

https://github.com/pedroresende/css-removal-bug

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Sep 28, 2023
@pedroresende pedroresende mentioned this issue Sep 28, 2023
Closed
@pedroresende
Copy link
Author

Just found an workaround, if you add a React Fragment <></> around the slot it won't loose it's style and syntax

@balibou
Copy link

balibou commented Jan 8, 2024

Hey @pedroresende, also if you add another children, like:
{hasLoaded && <MyButton>{buttonText}{buttonText}</MyButton>}
then it 's working without a Fragment 😵‍💫

@christian-bromann
Copy link
Member

This should be resolved with the latest version of @stencil/react-output-target. Let me know if it still poses an issue and I am happy to re-open.

@jeffplloyd
Copy link

jeffplloyd commented Oct 15, 2024 •
edited
Loading

@christian-bromann just tested this with 0.7.1 and the issue still remains when dynamically changing the slot content when the component does not have shadow enabled. The fragment workaround works for non-shadow components.

@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Nov 14, 2024

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@christian-bromann @pedroresende @balibou @jeffplloyd