Information: apply display flex

[tiagoboeing]

I'm using display: flex and appear not apply on elements.

Code example

const StyledIcon = styled.span`
  display: flex;
`;

Using div or span whethever, the result is the same.

My component

    return (
      <Host>
        <StyledIcon>
          <div>Column 1</div>
          <div>Column 2</div>
        </StyledIcon>
      </Host>
    );

Preview

For tests, adding display: flex; on dynamic created element

[MMT-LD]

@tiagoboeing looking at your code this is because you are using shadow: true. Try scoped: true or remove. This lib extracts the css to document head. Using shadow: true encapsulates your styles, hence why its not picking them up

[tiagoboeing]

Using scoped: true works, but a very important resource is losted, the Shadow DOM. Using scoped makes the main application can be override styles from web components and classes can be conflict. 😥