{"id":21188138,"url":"https://github.com/dev1an/meteor-web-components-example","last_synced_at":"2025-03-14T20:24:18.102Z","repository":{"id":90134854,"uuid":"73928929","full_name":"Dev1an/Meteor-web-components-example","owner":"Dev1an","description":"Example of using web components in a meteor project with blaze.","archived":false,"fork":false,"pushed_at":"2016-11-16T21:21:13.000Z","size":131,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T13:09:31.660Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/Dev1an.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-16T14:37:41.000Z","updated_at":"2016-11-16T14:39:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"d69f2591-607f-4266-9a8d-f8a64d1142c9","html_url":"https://github.com/Dev1an/Meteor-web-components-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dev1an%2FMeteor-web-components-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dev1an%2FMeteor-web-components-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dev1an%2FMeteor-web-components-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dev1an%2FMeteor-web-components-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dev1an","download_url":"https://codeload.github.com/Dev1an/Meteor-web-components-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243640693,"owners_count":20323708,"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-20T18:42:44.077Z","updated_at":"2025-03-14T20:24:18.080Z","avatar_url":"https://github.com/Dev1an.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Meteor \u0026 Web Components example\nExample of using web components in a meteor project with blaze and the babel transpiler.\n\n[Take a look at the running web app](https://dev1an.github.io/Meteor-web-components-example/)\n\n## How to run the example\n\n```shell\nmeteor npm install \u0026\u0026 meteor\n```\n\n## Lessons learned\n\n- There is a [bug](https://github.com/babel/babel/issues/4480) in the [babel transpiler](http://babeljs.io) that prevents you from extending the HTMLElement with ES6 classes. Here are two possible solutions:\n\n  - remove the ecmascript package with ``meteor remove ecmascript``\n  - add the document-register-element module using:  ``npm install document-register-element`` and then in your javascript file using ES6 classes, add: ``import 'document-register-element'``\n\n- Meteor's blaze-html-templates package converts all ``\u003ctemplate\u003e`` tags in your HTML files into Blaze templates, so you cannot simply clone the contents of your templates into your custom element's shadowDOM. Here are three simple solutions:\n\n  - When you are using react to bind data to your DOM, you can simply remove Blaze entirely from your project so you can use the standard HTML ``\u003ctemplate\u003e`` tags again. You can do this with the command:  ``meteor remove blaze-html-templates \u0026\u0026 meteor add static-html``.\n\n  - When you do want to use Blaze inside your project you can write your shadow-root templates as a string in your javascript files and use ``shadowRoot.innerHTML = myLongHTMLTemplateString``.\n\n  - Or you can write the shadow-root templates as Blaze templates and render them with Blaze straight into your shadow-root. This is easily achivable using the following Blaze function ``Blaze.renderWithData(Template.templateName, shadowRoot)``. Notice though that when you render a Blaze template manually you should also let blaze know when your template instance should be removed. Look at [this example](https://github.com/Dev1an/Meteor-web-components-example/blob/2a609f45ab0367643d17e3b13c1cc859d920b5e5/imports/ColoredText.js#L25) for more information.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev1an%2Fmeteor-web-components-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev1an%2Fmeteor-web-components-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev1an%2Fmeteor-web-components-example/lists"}