[csswg-drafts] [css-display-3] Add inner and outer display properties (#4729)

Jamesernator has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display-3] Add inner and outer display properties ==
CSS display level 3 adds the great change of allowing controlling the inner and outer display of an element. However it does not give a way to control them independently.

e.g. Consider a web component with a shadow root that would like to lay out its internals:

```html
<user-summary>
  <#shadow-root>
    <style>
      :host {
        display: block grid;
        grid:
          "avatar displayName" max-content
          "avatar userName" max-content
          / auto auto !important;
      }

      #avatar {
        grid-area: avatar;
      }

      #displayName {
        grid-area: displayName;
      }

      #userName {
        grid-area: userName;
      }
    </style>

    <img id="avatar" src="{{avatarSrc}}"/>
    <div class="name">{{displayName}}</div>
    <div class="username">{{userName}}</div>
  </#shadow-root>
</user-summary>
```

In this case the grid styling is important for the functionality of the component, however this comes with a couple caveats:
- In order to style the outer display a user needs to know the internal inner display, e.g. `user-summary { display: inline grid; }`
- Prevention of overriding the grid style using `!important` breaks the ability to make `user-summary` a different outer style

As such I'd like to propose adding `display-inside`/`display-outside` as individual properties, then the styles could be written as such:

```css
:host {
  display-outside: block; /* Can override externally */
  display-inside: grid !important; /* Cannot override externally as it is necessary */
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4729 using your GitHub account

Received on Saturday, 1 February 2020 04:57:47 UTC