Emotion: Styling shadow dom.

Created on 27 May 2019  路  2Comments  路  Source: emotion-js/emotion

Hi, better than explain, let me show you.

What's happening:
Capture d鈥檈虂cran 2019-05-27 a虁 14 49 07

What I expected:
Capture d鈥檈虂cran 2019-05-27 a虁 14 50 00

Environment information:

"@emotion/core": "^10.0.10",
"@emotion/styled": "^10.0.11",
"react": "^16.8.6",
"react-dom": "^16.8.6",

How can I use emotion/styled inside Webcomponents shadow dom.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class XComponent extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('div');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    ReactDOM.render(<App />, mountPoint);
  }
}

customElements.define('x-component', XComponent);

// App.js
import React from 'react';
import styled from '@emotion/styled';

function App() {
  return <StyledComponent>ok</StyledComponent>;
}

export default App;

const StyledComponent = styled.div`
  background: red;
`;

// index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <x-component></x-component>
  </body>
</html>
bug
Source
picture flo-pereira

Most helpful comment

Hey,

According to the docs, you need to use createEmotion or createCache and assign a container for emotion to render your styles into.

picture diffidentDude on 28 May 2019
👍3

All 2 comments

Hey,

According to the docs, you need to use createEmotion or createCache and assign a container for emotion to render your styles into.

diffidentDude picture diffidentDude on 28 May 2019
👍3

thanks @diffidentDude, it does the trick !! 馃憤

flo-pereira picture flo-pereira on 28 May 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tkh44 picture tkh44  路  3Comments
AlexanderProd picture AlexanderProd  路  3Comments
hamlim picture hamlim  路  3Comments
smlmrkhlms picture smlmrkhlms  路  3Comments
johnbrett picture johnbrett  路  3Comments