99 | Dynamic Styling
100 |
101 | The previous examples created the styles outside of the component definition.
102 | Since the styes don't need to change based on props or state, this makes sense.
103 | You can however make style changes based on props and/or state by updating the styles
104 | in render. You could also do this using an instance
105 | specific constructable stylesheet.
106 |
107 |
108 | The following shows the above example modified to change the way it displays based on a prop.
109 | Passing a reverse prop will make the button appear before the output.
110 | It also changes color based on state; contrived, I know. For the color changes
111 | I am using CSS custom properties to
112 | keep the dynamic changes to a minimum.
113 |
114 |
115 | Default:
116 |
117 |
118 |
119 | With the reverse prop set:
120 |
121 |
122 |
123 |
124 | You could also use :host() in
125 | the component's main stylesheet to reverse the order. To do so, add the following rule to the stylesheet:
126 |
127 |
128 | Remove the following from the dynamic styles:
129 |
130 | And add reverse as an attribute of the returned element:
131 |
132 |
133 | React will only add the reverse attribute when
134 | the reverse prop is true. When the attribute is
135 | present, the :host() rule will be applied by the browser.
136 |
137 | );
138 | }
139 |
--------------------------------------------------------------------------------
/src/docs/pages/Introduction.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import A from "../utils/A";
3 |
4 | export default function(props) {
5 | return (
6 | Introduction
7 |
8 | React shadow root allows you to use the shadow DOM in
9 | your React components. The biggest advantage of this is that you can include
10 | your CSS with your component and it will be scoped to the shadow DOM. The styles don't leak out
11 | of the shadow DOM and only inheritable styles can't get in. You can use a preprocessor or whatever you like to
12 | create your CSS as long as it is valid CSS when you use it in your component.
13 |
14 |
15 | In the examples I am using valid custom element names for
16 | the shadow host instead of a more generic div or span.
17 | This is not required, but I find it can make debugging easier and it allows you to easily target your components
18 | from your main CSS file if needed. Since the behavior is defined with React, you should not need
19 | to register the custom element.
20 |
21 | Installation
22 | npm i -S react-shadow-root
23 | or
24 | yarn add react-shadow-root
25 | Notes
26 |
27 | - A minimum of React 16 is required.
28 | - Works in all modern browsers except non-Chromium Edge. Click here for current browser support.
29 | - Not all HTML elements allow you to attach a shadow root. Click here for more information.
30 | - It has been tested with the Context API introduced in React 16.3.0 and it worked fine. It has not been tested with the previous API.
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/docs/pages/Slots.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Demo from "../demos/Slots";
3 | import A from "../utils/A";
4 | import { JSXBlock } from "../utils/CodeBlock";
5 | import NotSupported from "../utils/NotSupported";
6 |
7 | export default function(props) {
8 | const Component = props.shadowRootSupported ? Demo : NotSupported;
9 | const componentCode = `
10 | class ElementDetails extends React.Component {
11 | render() {
12 | return (
62 | Working With Slots
63 |
64 | Slots let you create placeholders in the shadow DOM for users to pass content to.
65 | Of course you can achieve something silmilar with props, but with slots the user can control the markup and style of what is passed in, which may or may not be a good thing.
66 |
67 |
68 | Let's steal an example from MDN.
69 | We'll modify it to be a React component instead of a web component. Be sure to include {'{this.props.children}'} after the
70 | closing ReactShadowRoot tag. Below is the React equivalent of the template.
71 |
72 |
73 | And how you might use it:
74 |
75 | This is the end result:
76 |
77 |
78 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/src/docs/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | body {
6 | color: #333;
7 | font-family: Arial, sans-serif;
8 | margin: 0;
9 | padding: 0;
10 | }
11 |
12 | header {
13 | align-items: center;
14 | background-color: #eee;
15 | border-bottom: 1px solid #666;
16 | display: flex;
17 | flex-direction: column;
18 | height: 150px;
19 | justify-content: center;
20 | margin: 0;
21 | text-align: center;
22 | width: 100%;
23 | }
24 |
25 | header h1 {
26 | font-family: monospace;
27 | margin: 0;
28 | }
29 |
30 | header h2 {
31 | color: #666;
32 | font-size: 1em;
33 | margin: 0;
34 | }
35 |
36 | main {
37 | display: flex;
38 | margin: 0 5%;
39 | }
40 |
41 | main > section {
42 | overflow-y: hidden;
43 | }
44 |
45 | #api ~ section {
46 | overflow-x: auto;
47 | }
48 |
49 | #api ~ section:first-of-type {
50 | margin-bottom: 5px;
51 | }
52 |
53 | #api ~ section h3 {
54 | left: 0;
55 | margin-right: -100%; /* Hack for Safari. Grrrrr */
56 | margin-top: 0;
57 | position: -webkit-sticky; /* Hack for Safari. Grrrrr */
58 | position: sticky;
59 | white-space: nowrap; /* Hack for Safari. Grrrrr */
60 | width: 0; /* Hack for Safari. Grrrrr */
61 | }
62 |
63 | table {
64 | border-collapse: collapse;
65 | margin-bottom: 15px;
66 | min-width: 750px;
67 | }
68 |
69 | tr:nth-child(2n) {
70 | background-color: #eee;
71 | }
72 |
73 | tr:nth-child(2n) code {
74 | background-color: #fff;
75 | }
76 |
77 | th, td {
78 | border: 1px solid #666;
79 | padding: 10px;
80 | }
81 |
82 | pre {
83 | background-color: #eee !important; /* Overriding an inline style. Grrrrr */
84 | border-radius: 5px;
85 | font-size: 14px;
86 | overflow-y: scroll !important; /* Overriding an inline style. Grrrrr */
87 | padding-right: 15px !important; /* Overriding an inline style. Grrrrr */
88 | }
89 |
90 | code {
91 | background-color: #eee;
92 | }
93 |
94 | code.block {
95 | border-radius: 3px;
96 | display: block;
97 | padding: 5px;
98 | width: fit-content;
99 | }
100 |
101 | code.inline {
102 | padding: 0 3px;
103 | }
104 |
105 | code.block,
106 | code.inline {
107 | font-size: 16px;
108 | }
109 |
110 | code.warning {
111 | color: red;
112 | margin: 3px 0;
113 | padding: 0 3px;
114 | }
115 |
116 | a {
117 | color: #00f;
118 | }
119 |
120 | a:hover {
121 | text-decoration: none;
122 | }
123 |
124 | nav {
125 | border-left: 1px solid #666;
126 | box-sizing: border-box;
127 | flex-shrink: 0;
128 | margin: 20px;
129 | margin-right: 0;
130 | padding-left: 20px;
131 | }
132 |
133 | nav a {
134 | color: #333;
135 | text-decoration: none;
136 | }
137 |
138 | .back-to-top {
139 | background-color: #333;
140 | border-radius: 3px;
141 | bottom: 20px;
142 | color: #fff;
143 | padding: 2px 5px;
144 | position: fixed;
145 | }
146 |
147 | .back-to-top:hover {
148 | text-decoration: none;
149 | }
150 |
151 | nav ul {
152 | background-color: #fff;
153 | list-style-type: none;
154 | margin: 0;
155 | margin-top: 30px;
156 | padding: 0;
157 | padding-bottom: 30px;
158 | position: -webkit-sticky;
159 | position: sticky;
160 | top: 50px;
161 | z-index: 1;
162 | }
163 |
164 | nav ul li {
165 | margin: 10px 0;
166 | }
167 |
168 | article {
169 | padding-bottom: 15px;
170 | }
171 |
172 | article:not(:last-child) {
173 | border-bottom: 1px solid #666;
174 | }
175 |
176 | article h2 {
177 | margin-top: 0;
178 | padding-top: 20px;
179 | }
180 |
181 | blockquote p {
182 | border-bottom: 2px solid #eee;
183 | border-top: 2px solid #eee;
184 | padding: 5px 0;
185 | }
186 |
187 | .output {
188 | background-color: #eee;
189 | border-radius: 5px;
190 | margin: 10px 0;
191 | padding: 10px;
192 | }
193 |
194 | focus-demo:focus {
195 | outline: 2px solid red;
196 | }
197 |
198 | .not-supported {
199 | color: #c00;
200 | margin: 0;
201 | }
202 |
203 | @media (max-width: 1023px) {
204 | main {
205 | margin: 0 10px;
206 | }
207 |
208 | nav {
209 | margin-left: 10px;
210 | padding-left: 10px;
211 | }
212 | }
213 |
214 | @media (min-width: 425px) {
215 | header h1 {
216 | font-size: 3em;
217 | }
218 | }
219 |
220 | @media (max-width: 666px) {
221 | nav {
222 | display: none;
223 | }
224 | }
225 |
226 | @media print {
227 | a {
228 | color: #333;
229 | text-decoration: none;
230 | }
231 |
232 | code {
233 | white-space: pre-wrap !important; /* Overriding an inline style. Grrrrr */
234 | }
235 |
236 | nav {
237 | display: none;
238 | }
239 | }
240 |
--------------------------------------------------------------------------------
/src/docs/utils/A.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default (props) => (Your browser does not support attaching a shadow root.
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/lib/ReactShadowRoot.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import PropTypes from 'prop-types';
4 |
5 | const constructableStylesheetsSupported = typeof window !== 'undefined'
6 | && window.ShadowRoot
7 | && window.ShadowRoot.prototype.hasOwnProperty('adoptedStyleSheets')
8 | && window.CSSStyleSheet
9 | && window.CSSStyleSheet.prototype.hasOwnProperty('replace');
10 |
11 | const shadowRootSupported = typeof window !== 'undefined'
12 | && window.Element
13 | && window.Element.prototype.hasOwnProperty('attachShadow');
14 |
15 | export default class extends React.PureComponent {
16 | static constructableStylesheetsSupported = constructableStylesheetsSupported;
17 | static constructibleStylesheetsSupported = constructableStylesheetsSupported;
18 | static defaultProps = {
19 | declarative: false,
20 | delegatesFocus: false,
21 | mode: 'open'
22 | };
23 | static displayName = 'ReactShadowRoot';
24 | static propTypes = {
25 | declarative: PropTypes.bool,
26 | delegatesFocus: PropTypes.bool,
27 | mode: PropTypes.oneOf(['open', 'closed']),
28 | stylesheets: PropTypes.arrayOf(typeof window !== 'undefined' ? PropTypes.instanceOf(window.CSSStyleSheet) : PropTypes.any)
29 | };
30 | static shadowRootSupported = shadowRootSupported;
31 |
32 | state = { initialized: false };
33 |
34 | /**
35 | * @param {object} props Properties passed to the component
36 | * @param {boolean} props.declarative When true, uses a declarative shadow root
37 | * @param {boolean} props.delegatesFocus Expands the focus behavior of elements within the shadow DOM.
38 | * @param {string} props.mode Sets the mode of the shadow root. (open or closed)
39 | * @param {CSSStyleSheet[]} props.stylesheets Takes an array of CSSStyleSheet objects for constructable stylesheets.
40 | */
41 | constructor(props) {
42 | super(props);
43 | this.placeholder = React.createRef();
44 | }
45 |
46 | componentDidMount() {
47 | const {
48 | delegatesFocus,
49 | mode,
50 | stylesheets
51 | } = this.props;
52 |
53 | this.shadowRoot = this.placeholder.current.parentNode.attachShadow({
54 | delegatesFocus,
55 | mode
56 | });
57 |
58 | if (stylesheets) {
59 | this.shadowRoot.adoptedStyleSheets = stylesheets;
60 | }
61 |
62 | this.setState({
63 | initialized: true
64 | });
65 | }
66 |
67 | render() {
68 | if (!this.state.initialized) {
69 | if (this.props.declarative) {
70 | // @ts-ignore
71 | return (