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:

<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:

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