{"id":18304614,"url":"https://github.com/numtel/meteor-webcomponent","last_synced_at":"2025-07-02T21:05:13.836Z","repository":{"id":22372476,"uuid":"25708894","full_name":"numtel/meteor-webcomponent","owner":"numtel","description":"WebComponent integration for Meteor templates","archived":false,"fork":false,"pushed_at":"2015-04-09T04:32:10.000Z","size":432,"stargazers_count":38,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-02T21:05:04.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/numtel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-24T21:25:04.000Z","updated_at":"2024-09-19T14:30:27.000Z","dependencies_parsed_at":"2022-09-01T15:41:46.794Z","dependency_job_id":null,"html_url":"https://github.com/numtel/meteor-webcomponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/numtel/meteor-webcomponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numtel%2Fmeteor-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numtel%2Fmeteor-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numtel%2Fmeteor-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numtel%2Fmeteor-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/numtel","download_url":"https://codeload.github.com/numtel/meteor-webcomponent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numtel%2Fmeteor-webcomponent/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263215288,"owners_count":23431893,"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-05T15:29:36.714Z","updated_at":"2025-07-02T21:05:13.753Z","avatar_url":"https://github.com/numtel.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# numtel:webcomponent\n\nTurn any Meteor template into a new element on all modern browsers with help from Polymer's [webcomponents.js polyfill library](https://github.com/Polymer/webcomponentsjs)\n\nLast decade's iframes can finally be banished in favor of new WebComponents. Full stylesheet and DOM isolation without extra layers is native in some browsers already (Chrome, Firefox 34). The Polymer library brings WebComponent support to all modern browsers (IE 9+). [Learn more about WebComponents...](http://webcomponents.org/)\n\n### Why use WebComponents when Meteor already has Spacebars?\n\nSpacebars already provides some of the features of WebComponents: attributes, child DOM.\nBeyond these features, a WebComponent provides CSS and DOM isolation in what is called a Shadow DOM.\nDOM isolation means that `querySelector()` or jQuery will not be able to directly find the elements.\nCSS isolation means that a rules on your page will not effect an element in your WebComponent's Shadow DOM (or vice-versa).\n\nPolymer's webcomponents.js library includes polyfills for all features except shadow DOM CSS isolation. To make up for this shortcoming, I have been working on a [shadow DOM CSS isolation polyfill](https://github.com/numtel/shadowstyles).\n\n## Installation\n\n```bash\n$ meteor add numtel:webcomponent\n```\n\n## Hello, World\n\nImagine the familiar template:\n\n```html\n\u003ctemplate name=\"hello\"\u003e\n  \u003cbutton\u003eClick Me\u003c/button\u003e\n  \u003cp\u003eYou've pressed the button {{counter}} times.\u003c/p\u003e\n\u003c/template\u003e\n```\n\nThis widget can be converted in to a WebComponent using its `registerElement` method:\n\n```javascript\n\n// ...Default event handlers...\n\nTemplate.hello.registerElement('hello-counter');\n```\n\nThen insert the new element anywhere in your application:\n\n```html\n\u003chello-counter\u003e\u003c/hello-counter\u003e\n```\n\n## Implements\n\n#### Template.prototype.registerElement(name, options)\n\n`name` *String* - The name of the new element type to be created. Must include a hyphen. A reference to the element constructor will be added to `window` on the camel-cased version of this name.\n\n`options` *Object* - Optionally, specify the following options:\n\nKey      | Type     | Description\n---------|----------|--------------------------\n`css`       |`string`   | Rules to add in a `\u003cstyle\u003e` tag\n`cssLinks`  |`[string]` | Array of HREFs to create `\u003clink\u003e` tags\n\n**Returns:** Element constructor\n\n## Advanced Usage\n\nTemplate:\n\nHTML:\n```html\n\u003ctemplate name=\"example\"\u003e\n  \u003c!-- Insert value from attribute --\u003e\n  \u003ch1\u003e{{myval}}\u003c/h1\u003e\n  \u003cbutton\u003eClick Me\u003c/button\u003e\n\n  \u003cp class=\"answer\"\u003eThis will be blue.\u003c/p\u003e\n\n  \u003c!-- Forward child DOM --\u003e\n  \u003ccontent\u003e\u003c/content\u003e\n\u003c/template\u003e\n```\n\nJavascript:\n```javascript\nTemplate.example.registerElement('advanced-example', {\n  css: 'h1 { color: red; } p { color: blue; }'\n});\n```\n\nLESS:\n```less\n// Styles for non-native browsers\n.componentMixin(~'\u003ediv');\n// Styles for browsers with ShadowRoot native\n.componentMixin(~'::shadow');\n\n.componentMixin(@suffix) {\n  advanced-example@{suffix} {\n    .some-rule {\n      color: blue;\n    }\n  }\n}\n```\n\nInstance:\n\n```html\n\u003cadvanced-example myval=\"Something in the way\"\u003e\n  \u003cp\u003eThis will not be blue because it has been forwarded. (In Chrome anyways)\u003c/p\u003e\n\u003c/advanced-example\u003e\n```\n\nElement attributes will be added to an object accessible as the template's context.\nAttributes names must be lowercase. The template will be rerendered when an attribute changes.\n\n## Compatibility Notes\n\nFor browsers that support Shadow DOM:\n\n* Styles may be applied from document sheets using the `::shadow` pseudo-class.\n* When using CSS embedded in a component, the `:host` pseudo-class matches the root element. By default, WebComponents are `display: inline`. Pass the following in the `css` option to change that:\n\n    ```css\n    :host { display: block; }\n    ```\n\n## Running tests\n\nTests may be ran like any other Meteor package:\n\n```bash\n# From repository directory (named numtel:webcomponent)\n$ meteor test-packages ./\n```\n\nTravis CI badge has been removed as PhantomJS \u003c2.0 (1.9.7 is latest stable installed on Travis) does not support MutationObservers or the polyfill to bring support to other browsers. If concerned, please run the tests locally. (They work for me in IE9/10, FF33, and Chrome. Soon, I may set up SauceLabs so that the tests can run in a normal browser with Travis.)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumtel%2Fmeteor-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnumtel%2Fmeteor-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumtel%2Fmeteor-webcomponent/lists"}