{"id":18254264,"url":"https://github.com/brikcss/element","last_synced_at":"2025-04-08T21:47:24.086Z","repository":{"id":143745454,"uuid":"178960416","full_name":"brikcss/element","owner":"brikcss","description":"Brikcss Element extends the awesomeness of native Web Components. Brikcss Element is a super light-weight wrapper around Custom Elements (part of Web Components), and extends its features and makes elements easy to develop.","archived":false,"fork":false,"pushed_at":"2020-06-02T18:34:02.000Z","size":9567,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T23:36:07.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/brikcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"docs/supporting-legacy-browsers.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-01T23:04:11.000Z","updated_at":"2020-07-30T13:02:39.000Z","dependencies_parsed_at":"2023-03-29T00:48:09.038Z","dependency_job_id":null,"html_url":"https://github.com/brikcss/element","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/brikcss%2Felement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Felement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Felement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Felement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247892592,"owners_count":21013742,"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-11-05T10:11:18.884Z","updated_at":"2025-04-08T21:47:24.065Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brikcss Element\n\n\u003c!-- Shields. --\u003e\n\u003cp\u003e\n    \u003c!-- NPM version. --\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@brikcss/element\"\u003e\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/element/latest.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- NPM tag version. --\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@brikcss/element\"\u003e\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/element/next.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- NPM downloads/month. --\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@brikcss/element\"\u003e\u003cimg alt=\"NPM downloads per month\" src=\"https://img.shields.io/npm/dm/@brikcss/element.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- Travis branch. --\u003e\n    \u003ca href=\"https://github.com/brikcss/element/tree/master\"\u003e\u003cimg alt=\"Travis branch\" src=\"https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master\"\u003e\u003c/a\u003e\n    \u003c!-- Codacy. --\u003e\n    \u003c!-- \u003ca href=\"https://www.codacy.com/app/thezimmee/element\"\u003e\u003cimg src=\"https://img.shields.io/codacy/grade/e6c03044c1e24c4c9a2f4f31e0c84e38/master.svg?style=flat-square\"/\u003e\u003c/a\u003e --\u003e\n    \u003c!-- \u003ca href=\"https://www.codacy.com/app/thezimmee/element\"\u003e\u003cimg src=\"https://img.shields.io/codacy/coverage/e6c03044c1e24c4c9a2f4f31e0c84e38/master.svg?style=flat-square\"/\u003e\u003c/a\u003e --\u003e\n    \u003c!-- Coveralls --\u003e\n    \u003c!-- \u003ca href='https://coveralls.io/github/brikcss/element?branch=master'\u003e\u003cimg src='https://img.shields.io/coveralls/github/brikcss/element/master.svg?style=flat-square' alt='Coverage Status' /\u003e\u003c/a\u003e --\u003e\n    \u003c!-- JS Standard style. --\u003e\n    \u003ca href=\"https://standardjs.com\"\u003e\u003cimg alt=\"JavaScript Style Guide\" src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- Prettier code style. --\u003e\n    \u003ca href=\"https://prettier.io/\"\u003e\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- Semantic release. --\u003e\n    \u003c!-- \u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\u003cimg alt=\"semantic release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\"\u003e\u003c/a\u003e --\u003e\n    \u003c!-- Commitizen friendly. --\u003e\n    \u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003c!-- Greenkeeper. --\u003e\n    \u003ca href=\"https://greenkeeper.io/\"\u003e\u003cimg src=\"https://badges.greenkeeper.io/brikcss/element.svg?style=flat-square\" alt=\"Greenkeeper badge\"\u003e\u003c/a\u003e\n    \u003c!-- MIT License. --\u003e\n    \u003ca href=\"LICENSE.md\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/express.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\n\u003c!-- @todo  Document \"TTFC\" time of 5 minutes or less. How to create your first meaningful component in 5 minutes or less. --\u003e\n\u003c!-- @todo  Add images to demonstrate the awesomeness of Brikcss Element. --\u003e\n\n**\u003cmark\u003e\\[ IMPORTANT \\]: Brikcss Element follows semantic versioning. Since it is currently at major version zero, [\"anything may change at any time\", and it \"should not be considered stable\"](https://semver.org/#spec-item-4).\u003c/mark\u003e**\n\nNative Web Components provide [many](https://duckduckgo.com/?q=why+native+web+components) [amazing](https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2) [benefits](https://duckduckgo.com/?q=benefits+of+native+web+components) traditionally only found in frameworks like Angular, Vue, or React. Web Components, however, have [many advantages over these types of frameworks](https://duckduckgo.com/?q=web+components+or+framework), and [should eventually replace them](https://blog.usejournal.com/web-components-will-replace-your-frontend-framework-3b17a580831c). The challenge with Web Components is that they are new and have a fair amount of boilerplate to write custom elements and components. Enter Brikcss Element.\n\nBrikcss Element is a **super lightweight** framework that simplifies and extends the awesomeness of native Web Components. At its core, Brikcss Element has two primary goals:\n\n1. To extend the power and features of Web Components in a way that allows developers and end users to easily implement only features they need.\n\n2. To simplify where possible, _**but not replace or heavily abstract**_, commonly used features in Web Components. In other words, make _TTFC_ (\"time to first component\") quick and easy.\n\nBrikcss Element strives for a very small learning curve for newbies, while also providing a high level of power and flexibility.\n\n## Contributing\n\nWe ❤️❤️❤️ contributions of any kind, whether it's bug reports, questions or feature requests, pull requests, and especially spreading some love about this project to your friends and co-workers!\n\n**[Read our contributing guidelines](./CONTRIBUTING.md) and get involved to support this project.**\n\n## Browser Support\\*\n\n| Chrome | Firefox | Safari | Edge | IE     |\n| ------ | ------- | ------ | ---- | ------ |\n| ✓      | ✓       | ✓      | ✓    | 11\\*\\* |\n\n\\*_With the [proper polyfills](#getting-started)._\u003cbr\u003e\n\\*\\*_IE11 can be supported with a transpiled build for legacy browsers._\n\n## Install\n\n**From NPM:**\n\n```bash\nnpm install -D @brikcss/element\n```\n\n**From GitHub:**\n\nDownload the [latest release](https://github.com/brikcss/element/releases/latest).\n\n## Getting Started\n\n1. Include Web Components polyfills. We recommend [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs), included with Brikcss Elements.\n\n    ```html\n    \u003cscript src=\"node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n    ```\n\n    _[Learn more about this and other Web Components polyfills](./docs/web-components-polyfills.md)._\n\n2. [Decide which Brikcss Element build you will use](./docs/including-brikcss-modules.md). _For simple prototypes/demos, feel free to use the Browser Module. For production applications we strongly encourage the Vanilla Module._ [Why?](./docs/including-brikcss-modules.md)\n\n3. Include it and extend it:\n\n    ```js\n    // app.js\n    // ------\n    // 1) Include it:\n    //    Vanilla module:\n    import BrikElement from '@brikcss/element';\n    //    Browser module:\n    import BrikElement from 'node_modules/@brikcss/element/dist/esm/brik-element.browser.js';\n    //    Universal module:\n    const BrikElement = brikcss.default;\n\n    // 2) Extend it:\n    class MyElement extends BrikElement {\n        constructor(...args) {\n            // If you have a constructor, always call super first.\n            super(args);\n            // Your constructor code...\n        }\n        // Define class methods/properties here...\n    }\n    ```\n\n    _Note: The default export automatically extends `HTMLElement`. If you want to extend a different built-in element (i.e., `HTMLAnchorElement`), [use the `BrikElement` named export](#brikelement)._\n\n4. Define your custom element:\n\n    ```js\n    MyElement.define('my-element', options);\n    // which is equivalent to:\n    window.customElements.define('my-element', MyElement, options);\n    ```\n\n    _Note: Per Custom Elements specifications, all custom element tags **must** have at least one hyphen (`-`)._\n\n5. Finally, use your custom element:\n\n    ```html\n    \u003cmy-element\u003e...\u003c/my-element\u003e\n    ```\n\n## API\n\n### Module Exports\n\n#### `default`\n\nThe default export returns a class that extends `HTMLElement`. Use as follows:\n\n```js\n// ES module (use relative path for Browser module):\nimport BrikElement from '@brikcss/element'\n// or Universal module:\nconst BrikElement = brikcss.default\n// and then:\nclass MyElement extends BrikElement {...}\n```\n\n_Note: The default export is equivalent to calling the `BrikElement` named export as follows: `BrikElement(HTMLElement)`._\n\n#### `BrikElement`\n\nThe only named export is `BrikElement`, which allows you to extend built-in HTML Elements (such as `HTMLAnchorElement`):\n\n```js\n// ES module (use relative path for Browser module):\nimport { BrikElement } from '@brikcss/element'\n// or Universal module:\nconst BrikElement = brikcss.BrikElement\n// and then:\nclass MyElement extends BrikElement(HTMLAnchorElement) {...}\n```\n\nNow your element will inherit all the properties of a built-in anchor tag element! _Note: You may need to use a [polyfill for extending built-in elements](https://github.com/ungap/custom-elements-builtin) for this to work in some browsers._\n\n### Static methods\n\n#### `BrikElement.define(tagName, options = {})`\n\nA simple shortcut/alternative to `window.customElements.define()`.\n\n-   `tagName` (_String_): Name of custom element to be defined. String must be hyphenated.\n-   `options` (_Object_): Configuration options passed to `window.customElements.define`.\n\n#### `BrikElement.with(...mixins)`\n\nMixins give BrikElement its power. To apply one or more mixins, simply pass them to the `BrikElement.with()` method:\n\n```js\nimport BrikElement from '@brikcss/element'\nimport MyMixin from 'my-mixin.js'\nclass MyElement extends BrikElement.with(MyMixin) {...}\n```\n\n_Note: You can apply existing mixins or [create your own](./docs/creating-mixins.md)._\n\n### Instance properties\n\n#### `this.root`\n\nSimple getter/setter which returns (or sets) the root element. By default, this will be `this.shadowRoot` or `this`, depending on whether `shadowRoot` has been attached.\n\n## Resources\n\n### Web Components\n\n-   [Web Components will replace your frontend framework](https://www.dannymoerkerke.com/blog/web-components-will-replace-your-frontend-framework)\n-   [MDN web docs: Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\n-   [Google Web Fundamentals: Building Components](https://developers.google.com/web/fundamentals/web-components/)\n\n\u003c!-- @todo  Add sections for Credits, Contributors, Resources, Projects using Birkcss Element. --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Felement/lists"}