search

glimmerjs / glimmer-web-component

Library to boot up your Glimmer components as Web Components
https://glimmerjs.com/guides/using-glimmer-as-web-components
MIT License
30 stars 11 forks source link

How to pass an argument/option to glimmer-web-component from index.html. #20

Closed shivgarg5676 closed 6 years ago

shivgarg5676 commented 6 years ago

I wrote my first glimmer web component which is expecting value from outside environment. After building the component it is working fine but not picking up value.

this is my index.html and i am trying to pass value by using @progress="40"

<html>
<head>
  <link rel="stylesheet" href="app.css">
  <script type="text/javascript" src="app.js" defer></script>
</head>
<body>
  <div>
    <progress-bar @progress="40" />
   </div>
</body>
</html>

this is my component.ts

import Component, {tracked} from '@glimmer/component';

export default class ProgressBar extends Component {
  @tracked('args')
  get progress() {
    return this.args.progress;
  }
}

This is my template.hbs

<div><h1>progress is {{progress}} percent</h1></div>

The result is this "progress is percent." and throws this error

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '@progress' is not a valid attribute name.

i also tried passing progress=40, without @ but that also do not work args are empty.

Why I am unable to get progress from args? Is that possible to pass a value from html file to glimmer component.

locks commented 6 years ago

Not at the moment @shivgarg5676, this is being tracked at https://github.com/glimmerjs/glimmer-web-component/issues/14, I believe.

shivgarg5676 commented 6 years ago

I am totally confused with the thinking behind the design and creation of glimmer. If glimmer components can be used only with ember and handlebars why not use ember components? I want to use glimmer components with rails application Is there a way possible to use glimmer component with attributes in rails application.

locks commented 6 years ago

@shivgarg5676 We are using Glimmer components for the Ember website using the web component shim, and it's a static middleman website. You can also use Glimmer components without the web component shim very easily.

The project is very new and we are still figuring out and implementing the APIs. The PR I linked you to is for implementing the APIs you asked for.

I'm closing this issue as the feature is already being tracked.

shivgarg5676 commented 6 years ago

Do using glimmer components in Ember project give me performance enhancement over Ember components? I mean to ask what should I prefer glimmer components or ember components in an ember application