-
-
Save danieldietrich/985a0497d701a58c03d0f748a51a7b47 to your computer and use it in GitHub Desktop.
Shadow DOM as a React component: https://dist-bpvbyiobiw.now.sh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .cache | |
| dist | |
| node_modules |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Shadow dom component</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { render } from "react-dom"; | |
| import Style from "./style"; | |
| import ShadowDom from "./shadow-dom"; | |
| function Demo() { | |
| return ( | |
| <React.Fragment> | |
| <Style>{`h2 { color: steelblue; }`}</Style> | |
| <h2>Outer text</h2> | |
| <ShadowDom> | |
| <Style>{` | |
| :host { padding: 0.5rem 1rem; background: antiquewhite; } | |
| h2 { color: palevioletred; } | |
| `}</Style> | |
| <h2>Shadow dom text</h2> | |
| </ShadowDom> | |
| </React.Fragment> | |
| ); | |
| } | |
| render(<Demo />, document.getElementById("app")); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "react-shadow-dom", | |
| "version": "1.0.0", | |
| "module": "dist/index.js", | |
| "scripts": { | |
| "build": "parcel build index.html", | |
| "start": "parcel serve index.html" | |
| }, | |
| "devDependencies": { | |
| "parcel-bundler": "^1.11.0" | |
| }, | |
| "dependencies": { | |
| "react": "^16.7.0", | |
| "react-dom": "^16.7.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { createPortal } from "react-dom"; | |
| export default class ShadowDom extends React.Component { | |
| constructor() { | |
| super(); | |
| this.state = {}; | |
| this.ref = React.createRef(); | |
| } | |
| componentDidMount() { | |
| const shadowRoot = this.ref.current.attachShadow({ mode: "open" }); | |
| this.setState({ shadowRoot }); | |
| } | |
| render() { | |
| return ( | |
| <div ref={this.ref}> | |
| {this.state.shadowRoot | |
| ? createPortal(this.props.children, this.state.shadowRoot) | |
| : null} | |
| </div> | |
| ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| export default function Style({ children }) { | |
| return <style dangerouslySetInnerHTML={{ __html: children }} />; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment