/
shadow-dom.js
47 lines (41 loc) · 1.08 KB
/
shadow-dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from 'react';
import domAlign from 'dom-align';
import ReactDOM from 'react-dom';
import createReactClass from 'create-react-class';
class Test extends React.Component {
align() {
const ret = domAlign(this.refs.source, this.refs.target, {
points: ['bl', 'bl'],
overflow: {
adjustY: 1,
},
});
console.log(ret);
}
render() {
window.align = this.align;
return (
<div style={{ height: 1000 }}>
<button ref="target">target</button>
<div style={{ height: 100 }} />
<button onClick={this.align.bind(this)}>align</button>
<div
ref="source"
style={{
position: 'absolute',
width: 100,
height: 200,
border: '1px solid red',
}}
>
oo
</div>
</div>
);
}
}
const reactContainer = document.getElementById('__react-content');
const div = document.createElement('div');
const shadowRoot = div.attachShadow({ mode: 'open' });
reactContainer.appendChild(div);
ReactDOM.render(<Test />, shadowRoot);