[Bug]: fluent-text block breaks the style attribute.

[levithomason]

Library

Web Components (@fluentui/web-components)

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 65.30 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 110.0.5481.177
    Edge: 110.0.1587.63
    Firefox: 107.0.1
    Safari: 16.3

Reproduction

(Story not yet shipped at time of writing)
https://web-components.fluentui.dev/?path=/docs/components-text--text#block

const style = "background: #ddd"

<fluent-text style="${style}"><span>Fluent text is inline by default. Setting</span></fluent-text>
<fluent-text style="${style}" block><span>block</span></fluent-text>
<fluent-text style="${style}"><span>will make it behave as a block element.</span></fluent-text>

Bug Description

Actual Behavior: The style attribute is not applied to the text when block is set.

Expected Behavior: The style should be applied to the text, as it is when block is not set.

Products/sites affected

https://web-components.fluentui.dev/

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[eljefe223]

This is because we are setting display: block to the slotted items when the block attribute is present but not updating the host display. You can see this illustrated in a quick code pen I created:

https://codepen.io/eljefe223/pen/vYzeMqJ

The solution is to just set the display on the host and set display: inherit on all slotted elements.

[eljefe223]

l'll create a PR