Comments (15)
Ahh I'm glad! Thanks @vhmth
from reactshadow.
Same issue here.
from reactshadow.
Also if you change:
ReactDOM.findDOMNode(this.parentNode).createShadowRoot()
to
ReactDOM.findDOMNode(this).parentNode.createShadowRoot()
you get errors about React.render
being called. If you change those calls to ReactDOM.render
, you run into the Only a ReactOwner can have refs. issue.
@DimitryDushkin is it safe to say this repo is no longer maintained?
from reactshadow.
@vhmth Have no idea about this repo status.
However I've found correct solution to make React work with Shadow DOM — https://gist.github.com/DimitryDushkin/c091d5a6c33e10641eef0828261d5398
from reactshadow.
I can look at upgrading ReactShadow
to React 15 as they did make changes that would affect it. However I implemented Shadow DOM in Keo using React 15 which works perfectly fine, and so you could use that if it, although it is a little more in-depth than this module.
from reactshadow.
@DimitryDushkin do you want to send in a PR, please?
from reactshadow.
@Wildhoney I cannot promise, but I'll try because at the moment I'm not totally satisfied with solution provided in gist.
from reactshadow.
Okay, thanks.
You can take a look at how I implemented it for Keo. It needs a little updating as it's using Shadow DOM v0's createShadowRoot
rather than attachShadow
, but everything else should still be valid.
from reactshadow.
Thank you for both solutions guys! Will let you know what I go with.
from reactshadow.
@Wildhoney trying to adopt what's in Keo to some of our components. Tried to set it up in the following way:
const MyComponent = class extends Component {
...
};
export default compose(shadow(), ({ props }) => {
return <MyComponent { ...props } />;
});
Now when I try to render that component, getContainer
throws an error saying it can't read length
of undefined
(this.props.component.children
is undefined apparently). I feel like I'm doing something dumb. :P
from reactshadow.
Hmm seems like when I do change the component out to this:
export default compose(shadow(), ({ props }) => {
return <p>Hello, world!</p>;
});
It does render correctly, but that now throws errors like this:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
from reactshadow.
Hmm another update, in the example above I simply copy/pasta'd the shadow
component. When I npm i keo
and then import { shadow } from 'keo';
and use that, I'm getting the following error:
Error in event handler for (unknown): Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.
Which is coming from componentDidMount
when calling ReactDOM.findDOMNode(this)
.
from reactshadow.
@vhmth you were almost there with the length
error, as I believe that relates to the cssDocuments
props not being passed. I encountered the same issue.
I've gone ahead and created a react-15.0
branch (on npm: 1.0.0-beta
) to update the codebase for React 15.x. It no longer uses the mixin approach as that's somewhat deprecated. It instead uses Keo with a few optimisations and tweaks:
import ShadowDOM from 'react-shadow';
<ShadowDOM cssDocuments="css/my-component.css">
<h1>Testing...</h1>
</ShadowDOM>
Where cssDocuments
can be either string
or array
.
from reactshadow.
Merged.
from reactshadow.
Sweet! :D I completely forgot to come back to this - this is working like a charm now! Thank you so much Adam!
from reactshadow.
Related Issues (20)
- Heavy bundle size with styled components HOT 2
- How can I use Shadow DOM content distribution with `react-shadow`? ( mix light with shadow, use `<slot>`) HOT 3
- 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
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.