{"id":18534808,"url":"https://github.com/atomicojs/inject-style","last_synced_at":"2025-04-09T15:31:50.771Z","repository":{"id":57099563,"uuid":"363979279","full_name":"atomicojs/inject-style","owner":"atomicojs","description":"Improves the extensibility of the CSS of your webcomponents","archived":false,"fork":false,"pushed_at":"2021-05-03T16:19:18.000Z","size":65,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T10:09:05.404Z","etag":null,"topics":["css","customelements","shadowdom","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/atomicojs.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}},"created_at":"2021-05-03T15:41:36.000Z","updated_at":"2021-05-03T21:39:23.000Z","dependencies_parsed_at":"2022-08-20T19:10:46.384Z","dependency_job_id":null,"html_url":"https://github.com/atomicojs/inject-style","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Finject-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Finject-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Finject-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Finject-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicojs","download_url":"https://codeload.github.com/atomicojs/inject-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247114177,"owners_count":20885888,"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":["css","customelements","shadowdom","webcomponents"],"created_at":"2024-11-06T19:17:00.562Z","updated_at":"2025-04-09T15:31:50.753Z","avatar_url":"https://github.com/atomicojs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @atomico/inject-style\n\nCreated by [@uppercod](https://twitter.com/uppercod) with reference to [@jouni](https://twitter.com/jouni)'s work.\n\nThis webcomponent is an alternative to `::part` and allows to inject CSS outside the shadowDOM into the shadowDOM of the parent who uses this webcomponent, consider:\n\n1. The CSS must be inside an at-rule rule `@media \u003ctagName | namespace\u003e`.\n2. The reading is static, if you want to execute dynamic effects, declare customProperty inside the `at-media` referenced by this webcomponent.\n3. Safe, as the rules are injected via `insertRule`.\n4. This component must be nested within shadowDOM depth 0, example `#shadow-root \u003e inject-style`.\n5. The search for css rules is limited by the `host` just like `::part`.\n\n```xml\n\u003cstyle\u003e\n    @media my-example {\n      button {\n        background: black;\n        border-radius: 100vh;\n        padding: 0.5rem 1rem;\n        color: white;\n        border: none;\n      }\n    }\n\u003c/style\u003e\n\u003cmy-example\u003e\n  #shadow-root\n        \u003c!-- inject-style will inject the css into `@media my-example` --\u003e\n        \u003cinject-style\u003e\u003c/inject-style\u003e\n\u003c/my-example\u003e\n```\n\nthe css inside the at-rule `@media my-example` will exist inside my-example only if they share the tagName or a custom namespace.\n\n## Install\n\n```bash\nnpm i @atomico/inject-style\n```\n\n## Usage\n\n### [Atomico](https://atomicojs.github.io/)\n\n```jsx\nimport { c } from \"atomico\";\nimport \"@atomico/inject-style\";\n\nfunction component() {\n  return (\n    \u003chost shadowDom\u003e\n      \u003cinject-style\u003e\u003c/inject-style\u003e\n      ...DOM\n    \u003c/host\u003e\n  );\n}\n\ncustomElements.define(\"my-component\", c(component));\n```\n\nRemember in Atomico you can also use Constructors to instantiate the webcomponent, example `\u003cInheritStyle/\u003e`.\n\n### Vinilla JS\n\n```js\nimport \"@atomico/inject-style\";\n\nclass Component extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n  }\n  connectedCallback() {\n    this.shadowRoot.innerHTML = `\n      \u003cinject-style\u003e\u003c/inject-style\u003e\n      ...DOM\n    `;\n  }\n}\n```\n\n## Properties\n\n| Property  | Type   | Description                                                  |\n| --------- | ------ | ------------------------------------------------------------ |\n| namespace | String | Permite añadir un namespace adicional a la catura de at-rule |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Finject-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicojs%2Finject-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Finject-style/lists"}