Ufdjrw

How to remove this toilet supply line that seems to have no nut?

Does Parliament hold absolute power in the UK?

Didn't get enough time to take a Coding Test - what to do now?

First use of “packing” as in carrying a gun

When did F become S in typeography, and why?

Wall plug outlet change

What do you call a plan that's an alternative plan in case your initial plan fails?

How are presidential pardons supposed to be used?

Was credit for the black hole image misattributed?

Semisimplicity of the category of coherent sheaves?

Wolves and sheep

Relations between two reciprocal partial derivatives?

What aspect of planet Earth must be changed to prevent the industrial revolution?

What's the point in a preamp?

Does Parliament need to approve the new Brexit delay to 31 October 2019?

Why does the Event Horizon Telescope (EHT) not include telescopes from Africa, Asia or Australia?

How does ice melt when immersed in water?

Mortgage adviser recommends a longer term than necessary combined with overpayments

Why can't wing-mounted spoilers be used to steepen approaches?

Did God make two great lights or did He make the great light two?

Working through the single responsibility principle (SRP) in Python when calls are expensive

Windows 10: How to Lock (not sleep) laptop on lid close?

"... to apply for a visa" or "... and applied for a visa"?

Am I ethically obligated to go into work on an off day if the reason is sudden?

How to render React childrens from a StencilJS parent?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

In the project I work on we are migrating all the UI components to StencilJS so that they are framework agnostic.
The problem I'm having is that now I have to migrate a Modal that we used to have in the react app to StencilJS and later on that StencilJS component will be consumed by the React app.

Of course modals have children, because they have content. I know that you can render Children with <slot /> in StencilJS, but what if those children are React Components, since the react app is the one consuming the modal?

something like

<Stencil-js-modal>
 <react-content-a/>
 <other-react-component/>
</Stencil-js-modal>

would that work? In case it wouldn't, then how that kind of integration between react and stencil can be achieved?

Thanks in advance.

reactjs web-component stenciljs

share|improve this question

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

add a comment | 

1

In the project I work on we are migrating all the UI components to StencilJS so that they are framework agnostic.
The problem I'm having is that now I have to migrate a Modal that we used to have in the react app to StencilJS and later on that StencilJS component will be consumed by the React app.

Of course modals have children, because they have content. I know that you can render Children with <slot /> in StencilJS, but what if those children are React Components, since the react app is the one consuming the modal?

something like

<Stencil-js-modal>
 <react-content-a/>
 <other-react-component/>
</Stencil-js-modal>

would that work? In case it wouldn't, then how that kind of integration between react and stencil can be achieved?

Thanks in advance.

reactjs web-component stenciljs

share|improve this question

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

add a comment | 

In the project I work on we are migrating all the UI components to StencilJS so that they are framework agnostic.
The problem I'm having is that now I have to migrate a Modal that we used to have in the react app to StencilJS and later on that StencilJS component will be consumed by the React app.

Of course modals have children, because they have content. I know that you can render Children with <slot /> in StencilJS, but what if those children are React Components, since the react app is the one consuming the modal?

something like

<Stencil-js-modal>
 <react-content-a/>
 <other-react-component/>
</Stencil-js-modal>

would that work? In case it wouldn't, then how that kind of integration between react and stencil can be achieved?

Thanks in advance.

reactjs web-component stenciljs

share|improve this question

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

<Stencil-js-modal>
 <react-content-a/>
 <other-react-component/>
</Stencil-js-modal>

share|improve this question

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

share|improve this question

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

edited Mar 10 at 12:58

Mr Lister

35.6k1078121

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

asked Mar 8 at 13:43

Emiliano IlardoEmiliano Ilardo

102

1 Answer
1

active

oldest

votes

0

Assuming <Stencil-js-modal> uses a <slot> to display its content that should work fine.

You'll want to ensure you're using shadow: true when defining the modal; that way React doesn't try to clobber the internals of the component when rendering it.

share|improve this answer

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much!
  
  – Emiliano Ilardo
  Mar 11 at 13:39
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55064482%2fhow-to-render-react-childrens-from-a-stenciljs-parent%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Assuming <Stencil-js-modal> uses a <slot> to display its content that should work fine.

You'll want to ensure you're using shadow: true when defining the modal; that way React doesn't try to clobber the internals of the component when rendering it.

share|improve this answer

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much!
  
  – Emiliano Ilardo
  Mar 11 at 13:39
  

  
  
  
  

add a comment | 

0

Assuming <Stencil-js-modal> uses a <slot> to display its content that should work fine.

You'll want to ensure you're using shadow: true when defining the modal; that way React doesn't try to clobber the internals of the component when rendering it.

share|improve this answer

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much!
  
  – Emiliano Ilardo
  Mar 11 at 13:39
  

  
  
  
  

add a comment | 

Assuming <Stencil-js-modal> uses a <slot> to display its content that should work fine.

You'll want to ensure you're using shadow: true when defining the modal; that way React doesn't try to clobber the internals of the component when rendering it.

share|improve this answer

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

share|improve this answer

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619

answered Mar 9 at 4:14

matthewsteelematthewsteele

8171619