\n \n
\n\n```\n\n> 💡 Above example requires setting up a module bundler, as discussed in earlier\n> section.\n\n> 💡 Check our\n> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/v18)\n> example implementation.\n\n[](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/v18)\n\n## Browser support\n\nBased on\n[ibm.com browser support](https://w3.ibm.com/w3publisher/ibm-web-standards-external/standards-mandatory/browser-standards):\n\n- Latest Chrome/Safari/FF ESR\n- IE and classic Edge are _not_ supported\n\n## List of available components\n\nView available web components at:\nhttps://www.ibm.com/standards/carbon/web-components/. You can see usage\ninformation in several ways:\n\n1. Going to Docs tab, where it shows the usage and available attributes,\n properties and custom events.\n2. Clicking the **KNOBS** tab at the bottom and changing values there. Most\n knobs are shown as something like `Button kind (kind)`, where `kind` is the\n attribute name\n3. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the\n selected component. You may see something like `bx-modal-closed` which\n typically indicates that an event with such event type is fired.\n\n## Stable selectors (for analytics and integration/E2E testing) in Web Components\n\nCan be found at [here](./docs/stable-selectors.md).\n\n## Advanced\n\n### Using custom styles in components\n\nAs Shadow DOM (one of the Web Components specs that\n`@carbon/ibmdotcom-web-components` uses) promises, styles that\n`@carbon/ibmdotcom-web-components` defines does not affect styles in your\napplication, or vice versa.\n\nHowever, in cases where your application or a Carbon-derived style guide wants\nto change the styles of our components, there are a few options.\n\n#### Creating derived components with different style\n\nYou can create a derived class of our component and override\n[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles),\nlike:\n\n```javascript\nimport { css, customElement } from 'lit';\nimport C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with-icon';\n\n@customElement('my-link-with-icon')\nclass MyLinkWithIcon extends C4DLinkWithIcon {\n // Custom CSS to enforce `g100` color of the link text\n static styles = css`\n ${C4DLinkWithIcon.styles}\n .bx--link-with-icon {\n color: #3d70b2;\n }\n `;\n}\n```\n\n#### Using CSS Custom Properties\n\nChanges to CSS Custom Properties of the Carbon theme are reflected in the color\nscheme of `@carbon/ibmdotcom-web-components` components:\n\nFor example, if you add CSS like below:\n\n```css\nc4d-link-with-icon {\n --c4d-link-01: #3d70b2; /* `$link-01` token for `g100` theme */\n}\n```\n\nThe color of the link in the code below changes to the one in the `g100` theme:\n\n```html\n...
\n \n \n ![\"IBM](\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\")