Comments (8)
Absolutely – we could do that, although it's making an assumption about the type of node to create, rather than taking it directly from your first child. I suppose we could accept an additional prop, such as wrapperNode
.
Thoughts?
from reactshadow.
I've taken a look at this again, and there are two issues, one of which we've spoken about:
- For
<child.type>
we don't have access to thetype
when theprops.children
is another component, and so we have to traverse through the children to find the first concrete element. - With
findDOMNode
when theprops.children
is a concrete element it yields the node which we can attach a shadow boundary to. However when it's another component it yieldsnull
and thus we cannot attach a shadow boundary to that – we need a way to find the concrete node.
I can achieve the former, but the latter I'm not sure about at the moment.
Does anybody have any suggestions?
from reactshadow.
FWIW, I was able to resolve this by throwing a <div> between
and
`, but not completely sure why it's needed. Might be good to add clarity in the README! Feel free to close this though.
from reactshadow.
We have the check for passing a HTML node rather than a wrapped component, as ReactShadow
needs to be able to determine the type of the node to append the shadow boundary to – otherwise it would have to recursively traverse the tree until it finds the first HTML node.
<div /> // this.props.children.type === 'div'
<WrappedComponent>
<div /> // this.props.children.props.children.type === 'div'
</WrappedComponent>
We could do that, but it may have unforeseen consequences.
from reactshadow.
Is it because the shadow DOM function is called on the first HTML node it comes across? If so, how come the ShadowDOM
component itself can't just create its own DOM element to us?
from reactshadow.
@Wildhoney regarding the finding the concrete child issue: First, I suggest making the error message clear to add an HTML DOM as first child of ShadowDOM so error gives fix, no need to search/waste time. Second, optionally add a shadowRoot prop that takes a String, or Node or whatever else you can accept as value.
from reactshadow.
How can I include css from my Component without being ignored ? Is it possible ?
from reactshadow.
Should work just fine with the updated version.
from reactshadow.
Related Issues (20)
- Can useLayoutEffect() be used instead of useEffect() to make rendering synchronous? HOT 3
- How to use ReactShadow with ChakraUI Drawers? HOT 1
- Is there any chance to have a working example with CRA and TS? HOT 1
- Lib stopped working on iOS 15? HOT 1
- Shadow tree inheriting from parent HOT 2
- Does it support new mui lib?
- [feature request] allow consumers to pass options to emotion
- global requires a polyfill. Shall we replace global with globalThis? HOT 2
- styled-components is not defined as a peer dependency HOT 1
- Update dependency to React 18? HOT 5
- Trouble Loading Custom Font Into Shadow DOM in my Chrome Extension
- template content is empty with react HOT 1
- Example links in readme are both broken
- Children of the shadow root cannot get retrieved at parent level within a useEffect
- Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree HOT 1
- Remove react-use dependency due to package size
- shadowroot has been depricated need to update with shadowrootmode in template element HOT 2
- Next.js v13 failed to build "TypeError: e.createContext is not a function" HOT 1
- Css Variables from External URL link inside of a shadow dom not getting recognized
- Warning: z: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactshadow.