{"id":15251173,"url":"https://github.com/jgroth/kompendium","last_synced_at":"2025-10-04T21:33:20.137Z","repository":{"id":38174407,"uuid":"242596308","full_name":"jgroth/kompendium","owner":"jgroth","description":"Documentation generator for Stencil components https://kompendium.dev/","archived":false,"fork":false,"pushed_at":"2024-12-23T22:21:27.000Z","size":2367,"stargazers_count":9,"open_issues_count":31,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-23T16:57:36.483Z","etag":null,"topics":["documentation","kompendium","stencil","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"","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/jgroth.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2020-02-23T21:51:02.000Z","updated_at":"2024-10-12T22:10:33.000Z","dependencies_parsed_at":"2023-11-08T13:44:20.246Z","dependency_job_id":"47276cd3-22f0-446c-909e-588cd9e9d651","html_url":"https://github.com/jgroth/kompendium","commit_stats":{"total_commits":364,"total_committers":8,"mean_commits":45.5,"dds":0.6895604395604396,"last_synced_commit":"ccdcad214e5afbd2c165255bef95aca95bcd82d0"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"purl":"pkg:github/jgroth/kompendium","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgroth%2Fkompendium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgroth%2Fkompendium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgroth%2Fkompendium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgroth%2Fkompendium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgroth","download_url":"https://codeload.github.com/jgroth/kompendium/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgroth%2Fkompendium/sbom","scorecard":{"id":518342,"data":{"date":"2025-08-11","repo":{"name":"github.com/jgroth/kompendium","commit":"ccdcad214e5afbd2c165255bef95aca95bcd82d0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.9,"checks":[{"name":"Code-Review","score":8,"reason":"Found 6/7 approved changesets -- score normalized to 8","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/pr-checks.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/pr-checks.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/pr-checks.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/pr-checks.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/pr-checks.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/pr-checks.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/jgroth/kompendium/release.yml/main?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned","Info:   3 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 29 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"21 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T02:20:38.675Z","repository_id":38174407,"created_at":"2025-08-20T02:20:38.676Z","updated_at":"2025-08-20T02:20:38.676Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278379373,"owners_count":25977214,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["documentation","kompendium","stencil","typescript","webcomponents"],"created_at":"2024-09-29T17:07:39.906Z","updated_at":"2025-10-04T21:33:20.104Z","avatar_url":"https://github.com/jgroth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"100%\" alt=\"hero\" src=\"https://user-images.githubusercontent.com/35954987/99229931-f5889200-27ee-11eb-934e-6284b6978b07.png\"\u003e\n\n# Kompendium\n![CI](https://github.com/jgroth/kompendium/workflows/CI/badge.svg?branch=main) [![Version](https://img.shields.io/npm/v/kompendium.svg)](https://www.npmjs.com/package/kompendium) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n# Introduction  \nKompendium is a simple, fast and elegant tool for generating documentation for components made with Stencil.   \n\nJust type everything in Markdown, from your code blocks to description texts of example components. Then enjoy a lightning fast responsive compendium of your components, with component API and live playground.\n\n### Please note\nKompendium is still in development. Consider this an early preview!\n\n# Features  \n* **Live playground** — No matter if you are updating your docs, working on your examples, or tweaking css, Kompendium will instantly auto-refresh and you will see the latest changes right away. No need for manual rebuilding and refreshing the browser!\n\n* **Elegant design** — Your examples and their description text are displayed on the left part of the documentation, while the code that generates them is resides on the right, and is smartly divided into tabs that show contents of connected files. It goes without saying that the layout is fully responsive and flawlessly adapts to tablets and phones.  \n\n* **Dark mode** — Kompendium seamlessly switches between light and dark theme using `prefers-color-scheme` media query. All colors get automatically dimmed in dark mode, to provide a more decent experience and a more accessible user interface. Additionally, users can easily switch to their desired theme and Kompendium will remember their choice.\n\n* **Multi page** — Kompendium divides your documentation into several pages, making sure that linkability is provided.  \n\n* **Markdown support** — Who doesn’t want to write in Markdown? While coding and articulating features, functionalities, and notes.\n\n* **Admonitions support** — You can easily add admonitions within your markdown text to generate side content that do not interrupt the document flow. Kompendium comes with custom-made visual support for six types of these call-out blocks (`info`, `warning`, `danger`, `note`, `tip`, and `important`). [read more](https://github.com/elviswolcott/remark-admonitions).\n\n* **Syntax highlighting** — Tabs that show the source code of for example `.tsx` or `.scss` files used in the Stencil example components have inbuilt syntax highlighting for each language. Also, code-blocks inside your documentations can benefit from syntax highlighting, if you specify their respective language. For the highlighting, we have hand-picked colors that look gorgeous both in light- and dark-mode.\n\n* **Debug mode** — You can isolate individual examples of the components which are showcased in the documentation, simply by pressing a button. This feature helps cleaning up the DOM and therefore an easier debugging experience.\n\n* **Search** — Kompendium has a simple search engine that makes finding information easier for users.\n\n\n\n# Demo  \nYou can see a live demo of Kompendium, being used by Lime Technologies to create their [component library and design system docs](https://lundalogik.github.io/lime-elements/versions/latest).\n\n\u003cimg width=\"50%\" alt=\"kompendium-dark\" src=\"https://github.com/jgroth/kompendium/assets/35954987/45ef80b7-a850-4647-a708-48dfeadb8e7a\"\u003e\u003cimg width=\"50%\" alt=\"kompendium-light\" src=\"https://github.com/jgroth/kompendium/assets/35954987/f1a38bdb-1fee-4d87-895b-ecc4221e62b9\"\u003e\n\n# Contributing\nPlease see CONTRIBUTING for details.\n\n# Credits\n* [Johan Groth](https://github.com/jgroth) — Development\n* [Adrian Schmidt](https://github.com/adrianschmidt) — Development\n* [Kiarokh Moattar](https://github.com/Kiarokh) — Design  \n\n # License\nThe MIT License (MIT).  \n_____________\n\n# Documentation  \n## Getting started\n### Installation  \nKompendium is available as a package on NPM and is installed using the NPM CLI\n````\nnpm install kompendium\n\n````\n\n## Configuration\nNext, we need to configure Kompendium to generate our documentation. Kompendium runs using the `docs-custom` target in Stencil. We also need to copy the Kompendium components to our `www` folder in order to use them with the Stencil dev server.\n````ts\nstencil.config.ts\nimport { Config } from '@stencil/core';\nimport { kompendium } from 'kompendium';\n\nexport const config: Config = {\n    namespace: 'my-project',\n    outputTargets: [\n        {\n            type: 'docs-custom',\n            strict: true,\n            generator: kompendium()\n        },\n        {\n            type: 'www',\n            serviceWorker: null,\n            copy: [{\n                src: '../node_modules/kompendium/dist/',\n                dest: 'assets/kompendium/'\n            }]\n        }\n    ]\n};\n````\nTo get the generated documentation up and running, simply use the `kompendium-app` component in your `index.html` file. Don't forget to also include the scripts and styles, both for your own components and the ones that we copied during the build.\n\n````html\nindex.html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"description\" content=\"My Stencil components\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003cbase href=\"/\"\u003e\n    \u003ctitle\u003eMy Project\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003clink href=\"/build/my-project.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript type=\"module\" src=\"/build/my-project.esm.js\"\u003e\u003c/script\u003e\n    \u003cscript nomodule src=\"/build/my-project.js\"\u003e\u003c/script\u003e\n\n    \u003clink href=\"/assets/kompendium/kompendium/kompendium.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript type=\"module\" src=\"/assets/kompendium/kompendium/kompendium.esm.js\"\u003e\u003c/script\u003e\n    \u003cscript nomodule src=\"/assets/kompendium/kompendium/kompendium.js\"\u003e\u003c/script\u003e\n\n    \u003ckompendium-app\u003e\u003c/kompendium-app\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n````\n\n### Running the dev server\nNext, we can start the dev server by running\n````\nstencil build --dev --watch --serve --docs\n````\n\n## Writing documentation\nThe generated documentation is fetched from the doc blocks inside the components source files. If we would have a component like the one below, it would generate the corresponding documentation. Kompendium understands how to read Markdown, so any additional markup will automatically be parsed.\n\n````tsx\nmy-component.tsx\nimport { Component, h, Prop } from '@stencil/core';\n\n/**\n * This is a sample component\n *\n * Kompendium will parse the doc blocks and render it using Markdown\n */\n@Component({\n    tag: 'my-component',\n    shadow: true,\n})\nexport class MyComponent {\n    /**\n     * This is a sample property\n     */\n    @Prop()\n    public name: string;\n\n    render() {\n        return \u003cp\u003eHello, {this.name}!\u003c/p\u003e;\n    }\n}\n````\n\n## Adding examples\nTo improve the documentation even more, you can add examples of how to use your components. An example component is just another component that displays how your component is used. The example will be displayed both live and with the source code for the example.\nTo include an example, the custom `@exampleComponent` doc block decorator should be used together with the name of the component. There is no limit to the number of components you can include.\n\n````tsx\nmy-component.tsx\nimport { Component, h, Prop } from '@stencil/core';\n\n/**\n * This is a sample component\n *\n * Kompendium will parse the doc blocks and render it using Markdown\n *\n * @exampleComponent my-component-example\n */\n@Component({\n    tag: 'my-component',\n    shadow: true,\n})\nexport class MyComponent {\n    /**\n     * This is a sample property\n     */\n    @Prop()\n    public name: string;\n\n    render() {\n        return \u003cp\u003eHello, {this.name}!\u003c/p\u003e;\n    }\n}\n````\nThe example component in this case is very simple\n\n````tsx\nmy-component-example.tsx\nimport { Component, h } from '@stencil/core';\n\n/**\n * This is an example for the `my-component` component\n */\n@Component({\n    tag: 'my-component-example',\n    shadow: true,\n})\nexport class MyComponentExample {\n    render() {\n        return \u003cmy-component name=\"World\" /\u003e;\n    }\n}\n````\nIt's recomended to either name all the examples in a similar fashion, or to place them in an examples/ folder or similar. This way, it's very easy to exclude them from the production build by excluding them in the Stencil configuration.\n\n\n## Type information\nKompendium can generate documentation about any custom Typescript types that you use in your components. You might have props or events that implement a custom interface and this should be documented as well so it is easy for the consumer of your components to use them.\n### Configuration\nAll types needs to be exported from a single file. The default name of this file is ./src/types.ts, but this can be configured if needed.\n````ts\nstencil.config.ts\n{\n    type: 'docs-custom',\n    strict: true,\n    generator: kompendium({\n        typeRoot: './src/interface.d.ts'\n    })\n}\n````\n**Note:** This file should also be exported from the `index.ts` file so type hints will be available when consuming the components in a code editor.\n### Example\n````tsx\nmy-component.tsx\nimport { Component, h, Prop } from '@stencil/core';\nimport { MyData } from './my-data.ts';\n\n/**\n * This is a sample component\n *\n * Kompendium will parse the doc blocks and render it using Markdown\n */\n@Component({\n    tag: 'my-component',\n    shadow: true,\n})\nexport class MyComponent {\n    /**\n     * This is a sample property\n     */\n    @Prop()\n    public data: MyData;\n\n    render() {\n        return \u003cp\u003eHello, {this.data.name}!\u003c/p\u003e;\n    }\n}\n````\n````ts\nmy-data.ts\n/**\n * This is a custom interface used in `my-component`\n */\nexport interface MyData {\n    /**\n     * The name to display when the component renders\n     */\n    name: string;\n}\n````\n````ts\ninterface.d.ts\nexport * from './my-component/my-data.ts';\n````\n## Configuration options\n| Option     \t| Description                                                   \t| Default value             \t|\n|------------\t|---------------------------------------------------------------\t|---------------------------\t|\n| `path`       \t| Path to folder where Kompendium will store the generated data \t| `.kompendium/              \t|\n| `publicPath` \t| The public web distribution directory used by Stencil.        \t| `www`                       \t|\n| `title`      \t| Title to display on top of the documentation                  \t| Fetched from `package.json` \t|\n| `typeRoot`   \t| Entry point for type information                              \t| `./src/types.ts`            \t|\n\n---\n\n## Inheritance of styles and overriding them\n\nYou will be using Kompendium to generate documentation for your Stencil components and show both you and your consumers a preview of these components. Web components are inherently isolated, carrying their own styles that are not easily manipulated externally. However, it's important to note that Kompendium introduces its own styles, some of which are inherited by the web components displayed on the documentation page.\n\nIn most scenarios, this style-inheritance is inconsequential. However, when developing a comprehensive component library, certain generic CSS properties require careful attention to prevent them from being inherited from Kompendium. These typically include font-related styles such as `font-family`, `font-size`, `line-height`, and `color`.\n\nExactly because these are inherited properties, these are usually set at the `:root` level in the application consuming your web components, eliminating the need to specify them individually in each web component. To maintain style consistency, you can override these properties on the documentation page.\n\nKompendium offers a few CSS Custom Properties which enables you to do so.\n\n-   `--kompendium-example-color`: Overrides the inherited `color` affecting text color in your web components.\n-   `--kompendium-example-font-family`: Overrides the inherited `font-family` in your web components.\n-   `--kompendium-example-font-size`: Optionally overrides the inherited `font-size`, depending on the font-family in use.\n-   `--kompendium-example-line-height`: Optionally overrides the inherited `line-height`, depending on the font-family in use.\n\nYou can define these properties for your instance of Kompendium as shown below:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml dir=\"ltr\"\u003e\n    \u003chead\u003e\n        \u003c!-- other stuff in the `head` section --\u003e\n        \u003cstyle\u003e\n            :root {\n                --kompendium-example-color: #1d1d1d;\n                --kompendium-example-font-family: 'Roboto', sans-serif;\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003c!-- other stuff in the `body` section --\u003e\n        \u003ckompendium-app path=\"/kompendium.json\"\u003e\u003c/kompendium-app\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgroth%2Fkompendium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgroth%2Fkompendium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgroth%2Fkompendium/lists"}