{"id":15934650,"url":"https://github.com/knowler/web-components-open-styling","last_synced_at":"2026-03-19T18:26:19.900Z","repository":{"id":222864843,"uuid":"758581324","full_name":"knowler/web-components-open-styling","owner":"knowler","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-16T16:23:50.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T08:04:47.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knowler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-16T16:18:14.000Z","updated_at":"2024-02-28T18:05:53.000Z","dependencies_parsed_at":"2024-02-16T17:43:50.249Z","dependency_job_id":"2781d4c4-fbf9-464c-a1c9-47c54213b6d5","html_url":"https://github.com/knowler/web-components-open-styling","commit_stats":null,"previous_names":["knowler/web-components-open-styling"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowler%2Fweb-components-open-styling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowler%2Fweb-components-open-styling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowler%2Fweb-components-open-styling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowler%2Fweb-components-open-styling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowler","download_url":"https://codeload.github.com/knowler/web-components-open-styling/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243437965,"owners_count":20290864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-07T03:20:27.933Z","updated_at":"2025-12-29T05:52:17.748Z","avatar_url":"https://github.com/knowler.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Components Open Styling\n\n## Problem Statement\n\n(Some synthesis of the generalized used cases along with a summary of\nthe insufficiencies of what we currently have.)\n\n## Use Cases\n\n### Developers want to style shadow roots externally\n\n- This centres the page author.\n- Related: page authors would like to style components with a richer API.\n\n\u003e A team using a CSS-based design system wants to integrate a third\n\u003e party web component into a page. They want to be able to style a\n\u003e complex structure within the shadow root.\n\n### Developers want to use external styles in their shadow roots\n\n- This centres the component author.\n- Phrased another way: component authors would like to allow their\n  element to receive default styles from the document.\n- Related: app developers (authors of the page and components) would\n  like to use a unified styling system like a utility CSS methodology\n  to style elements inside and outside of shadow roots.\n\n\u003e A team building an application is using web components. They want to\n\u003e use a utility CSS library to style both the application and the\n\u003e components.\n\n### Developers want to share styles between their shadow roots\n\n- This centres component authors.\n\n## Why are CSS Parts insufficient for the task?\n\n- CSS Parts allow you to compose upon defaults set by the component. In\n  some cases, it might be desirable to set the defaults for the\n  component to compose.\n- CSS Parts are one-dimensional for the page author.\n- CSS Parts being accessed via a pseudo-element mean that they cannot\n  easily be integrated into a legacy system.\n\n## Why is slotted content insufficient for the task?\n\n- Slotted content allows you to compose upon defaults set by the\n  component. In some cases, it might be desirable to set the defaults\n  for the component to compose.\n- Slotted content is one-dimensional for the component author.\n\n## Exploring where styles are cascaded.\n\n### Host styles being cascaded before the shadow root\n\nIn this case, the styles act as easily overrideable defaults. A host can\nchoose to enforce styles by using `!important`. While it is notable that\nthis is very natural to how Cascade layers work, this might not always\nbe an option for legacy styles which might be read-only. It is possible\nto enforce read-only styles as effectively `!important` through the use\nof sub-layers and `all: revert-layer !important`.\n\n### Host styles are cascaded in the same context/layer as the shadow root\n\nIn this case, the styles might not be easily overrideable as they now\ncontend with the styles in the shadow root in respect to specificity and\norder of appearance. The latter would vary based on where the styles\nwere being set as it’s not a given. Since shadow roots generally don’t\nneed to deal with specificity, this might be an easy win for the host’s\nstyles which increases the challenge for the component author to express\nwhat is important (see the past few decades of styling with CSS).\n\n### Host styles are cascaded after the shadow root\n\nIn this case, they would work the same as how styles for `::part()`,\nslotted content (i.e. from the host; not set with `::sloted()`),\nand `:host()` work. In this case, they would effectively be a\nreplacement for those styling APIs since they would have not value.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowler%2Fweb-components-open-styling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowler%2Fweb-components-open-styling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowler%2Fweb-components-open-styling/lists"}