w3c / w3c/csswg-drafts

[css-cascade] Placing default styles before inner shadow contexts and presentational hints

Open
#11,751 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-cascade-7
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

This idea was originally posted in https://github.com/w3c/csswg-drafts/issues/10094#issuecomment-2179369415 and later moved into its own issue.

There is currently no designated place for "lowest-priority author styles". #10094 suggests an "always first" layer, however any such layer still wins over styles from inner context (i.e. shadow DOM).

What if there was a way to add styles in the author origin before presentational-hints and before inner shadow contexts? This would be a safe, designated space for "true default styles".

Example syntax using a hypothetical (very bikesheddable) @first-context at-rule:

<head>
  <style>
    @first-context {
      * { margin: 0; } /* lowest priority */
    }
  </style>
</head>

<my-component>
  <template shadowrootmode="open">
    <style>
      /* This still takes priority over styles in first-context */
      :host { margin: 1rem }
    </style>
    <slot></slot>
  </template>
</my-component>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the discussion linked from issue #10094 and compare its proposed always-first layer with the shadow DOM and presentational-hint ordering described here. Done means reaching a decided design for a designated lowest-priority author-style position and its syntax; the example @first-context rule is explicitly still open to bikeshedding.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.