Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A little Web Component in my React
import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';
export class ShadowDom extends Component {
constructor(props){
super(props)
this.getTargetRef = this.getTargetRef.bind(this);
}
componentDidMount() {
const { children, delegatesFocus } = this.props;
this.shadowRoot = this.target.attachShadow({ mode: 'open', delegatesFocus });
render(<Fragment>{ children }</Fragment>, this.shadowRoot)
}
componentDidUpdate() {
const { children } = this.props;
render(<Fragment>{ children }</Fragment>, this.shadowRoot);
}
componentWillUnmount() {
unmountComponentAtNode(this.shadowRoot);
}
getTargetRef(c) {
const { nodeRef } = this.props;
this.target = c;
nodeRef && nodeRef(c);
}
render() {
// Don't pass children and delegatesFocus with spread.
const { tag, delegatesFocus, children, lightDom, ...rest } = this.props;
const ShadowDomTag = tag;
return (
<ShadowDomTag ref={ this.getTargetRef } { ... rest }>
{ lightDom() }
</ShadowDomTag>
);
}
}
ShadowDom.propTypes = {
tag: PropTypes.string,
delegatesFocus: PropTypes.bool,
nodeRef: PropTypes.func,
lightDom: PropTypes.func,
}
ShadowDom.defaultProps = {
tag: 'span',
delegatesFocus: false,
lightDom: () => null
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.