{"id":14990397,"url":"https://github.com/calebdwilliams/construct-style-sheets","last_synced_at":"2025-05-16T16:09:26.652Z","repository":{"id":34037114,"uuid":"166241177","full_name":"calebdwilliams/construct-style-sheets","owner":"calebdwilliams","description":"Constructible style sheets/adopted style sheets polyfill","archived":false,"fork":false,"pushed_at":"2024-06-11T13:12:25.000Z","size":3307,"stargazers_count":145,"open_issues_count":26,"forks_count":23,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-09T09:24:44.855Z","etag":null,"topics":["construct-style-sheets","css","cssmodules","cssom","modules","polyfill","proposal","shadowdom","style-sheets","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calebdwilliams.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-17T14:41:25.000Z","updated_at":"2025-02-18T23:14:49.000Z","dependencies_parsed_at":"2024-05-05T02:02:59.566Z","dependency_job_id":"b2c4d308-2cc8-4977-8527-fa75016037af","html_url":"https://github.com/calebdwilliams/construct-style-sheets","commit_stats":{"total_commits":203,"total_committers":13,"mean_commits":"15.615384615384615","dds":0.5123152709359606,"last_synced_commit":"bdd71c7f480ce08214e01d9cd2c215dcdf8a9097"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fconstruct-style-sheets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fconstruct-style-sheets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fconstruct-style-sheets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fconstruct-style-sheets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebdwilliams","download_url":"https://codeload.github.com/calebdwilliams/construct-style-sheets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254011174,"owners_count":21999064,"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":["construct-style-sheets","css","cssmodules","cssom","modules","polyfill","proposal","shadowdom","style-sheets","webcomponents"],"created_at":"2024-09-24T14:20:04.062Z","updated_at":"2025-05-16T16:09:26.627Z","avatar_url":"https://github.com/calebdwilliams.png","language":"TypeScript","readme":"# Constructible style sheets polyfill\n\n[![CI](https://github.com/calebdwilliams/construct-style-sheets/actions/workflows/ci.yml/badge.svg)](https://github.com/calebdwilliams/construct-style-sheets/actions)\n[![npm version](https://img.shields.io/npm/v/construct-style-sheets-polyfill.svg?style=flat)](https://npmjs.org/package/construct-style-sheets-polyfill 'View this project on npm')\n[![codecov](https://codecov.io/gh/calebdwilliams/construct-style-sheets/branch/main/graph/badge.svg)](https://codecov.io/gh/calebdwilliams/construct-style-sheets)\n\nThis package is a polyfill for the [constructible style sheets/adopted style sheets specification](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md). The full specificaiton is enabled by default in Google Chrome as of version 73. Firefox only has support as of version 101, and Safari as of version 16.4.\n\n## Use case\n\nThe constructible style sheets proposal is intended to allow for the dynamic\ncreation and sharing of style sheets, even across shadow boundaries. By adopting\na style sheet into a shadow root, the same sheet can be applied to multiple\nnodes, including the document.\n\n## How it works\n\nThis polyfill will create a new style element for every `DocumentOrShadowRoot`\ninto which the sheet is adopted. This is counter to the current proposal, but\nupdates to the style sheet using the `replace` or `replaceSync` methods should\nupdate the relevant style elements with the updated content across all adopters.\n\nNo changes will occur in a browser that supports the feature by default.\n\n## Support\n\nThis polyfill supports all modern browsers and IE 11.\n\nFor browsers that do not support the web components specification (currently\nIE 11 and Edge) only the document-level style sheets adoption works.\n\n### IE 11\n\nTo make this polyfill work with IE 11 you need the following tools:\n- `Symbol` polyfill (with support for `Symbol.hasInstance`).\n- [@babel/plugin-transform-instanceof](https://www.npmjs.com/package/@babel/plugin-transform-instanceof)\napplied to your code that uses `instanceof` against `CSSStyleSheet`.\n\n## Installation\nThis package is available on `npm` under the name `construct-style-sheet-polyfill`\nand can be installed with [npm](https://docs.npmjs.com/getting-started),\n[yarn](https://yarnpkg.com/en/docs/getting-started), [unpkg](https://unpkg.com)\nor however else you consume dependencies.\n\n### Example commands: \n\nnpm:\n```bash\nnpm i construct-style-sheets-polyfill\n```\n\nyarn:\n```bash\nyarn add construct-style-sheets-polyfill\n```\n\nunpkg:\n```javascript\nimport 'https://unpkg.com/construct-style-sheets-polyfill';\n```\n\n## Usage\n\n```javascript\nconst everythingTomato = new CSSStyleSheet();\neverythingTomato\n  .replace(\n    `\n* {\n    color: tomato;\n}\n`,\n  )\n  .then(console.log); // will log the CSSStyleSheet object\n\ndocument.adoptedStyleSheets = [everythingTomato];\n\nclass TestEl extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({mode: 'open'});\n    this.shadowRoot.adoptedStyleSheets = [everythingTomato];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = `\u003ch1\u003eThis will be tomato colored, too\u003c/h1\u003e`;\n  }\n}\n\ncustomElements('test-el', TestEl);\n\nconst testEl = new TestEl();\ndocument.body.appendChild(testEl);\n```\n\nThe polyfill will append new `style` tags to the designated `DocumentOrShadowRoot`.\nManually removing the style node will cause a re-insertion of the styles at the\ndesignated root. To remove a style sheet, you _must_ remove the style element\nfrom the `element.adoptedStyleSheets` array. The behavior here is supposed to\nemulate a `FrozenArray`, so modifying the array in question will have no effect\nuntil the value is changed using a setter.\n\n## A note about versioning\n\nThis packages doesn't necessarily follow semantic versioning. As the spec is still under consideration and implementation by browser vendors, the features supported by this package will change (generally following Chrome's implementation).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebdwilliams%2Fconstruct-style-sheets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebdwilliams%2Fconstruct-style-sheets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebdwilliams%2Fconstruct-style-sheets/lists"}