cypress: shadow-dom example test (#4413)

cypress/integration/examples/shadow-dom.ts

@@ -0,0 +1,10 @@
+describe('shadow-dom example', () => {
+  beforeEach(() => cy.visit('examples/shadow-dom'))
+
+  it('renders slate editor inside nested shadow', () => {
+    const outerShadow = cy.dataCy('outer-shadow-root').shadow()
+    const innerShadow = outerShadow.find('> div').shadow()
+
+    innerShadow.findByRole('textbox').should('exist')
+  })
+})

site/examples/shadow-dom.tsx

@@ -24,7 +24,7 @@ const ShadowDOM = () => {
     ReactDOM.render(<ShadowEditor />, reactRoot)
   })
 
-  return <div ref={container} />
+  return <div ref={container} data-cy="outer-shadow-root" />
 }
 
 const ShadowEditor = () => {