Skip to content

Instantly share code, notes, and snippets.

@EdwardIrby EdwardIrby/App.jsx
Created Mar 5, 2018

Embed
What would you like to do?
Pulling the ShadowDom Component all together
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value: props.value,
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { value } = e.target;
this.setState({ value })
}
render() {
const styles = css`
:host {
display: flex;
flex-direction: column;
white-space: nowrap;
text-overflow: ellipsis;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
.text {
color: green;
}
input, input::placeholder {
color: blue;
}
::slotted(.text) {
color: purple;
}
`
return (
<ShadowDom lightDom={
() => (
<Fragment>
<span>I'm some light dom </span>
<span slot='span' className='text'>I'm some slotted purple light dom </span>
</Fragment>
)
}>
<style type='text/css'>{ styles }</style>
<span className='text'>I should be green</span>
<Text className='text'>I should be red</Text>
<slot name='span'></slot>
<input onChange={ this.handleChange } value={ this.state.value } placeholder="I should be blue" />
</ShadowDom>
);
}
}
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.