Access element in DOM

[jadsonlourenco]

I can't access an element within the web-component (DOM), I have a folder with two files: "component.html" and "component.js" in JS file is where I registered the "template" as "web-component", but now need to add an effect using JS, but I can't (I'm using callback "rendered" template).

PS: I thought this package was this work also isolate the JS for each web-component, thus equal to the CSS/LESS can have an isolated component.

Thanks!

[numtel]

This package does nothing to try to isolate JS or CSS. I'm not really sure what the question is, if you would provide a link to a minimal example app showing the issue that would be helpful.

Thanks, Ben

[jadsonlourenco]

In fact the DOM isolation exists, because this package generates the "shadow DOM", but in a traditional web-component all is saved in an HTML file, and within that file have the sessions of STYLES, JS and HTML. See the example of Polymer. So you can work with CSS with an internal element (isolated) of this component, the same thing for JS to manipulate the elements and values.

In practice your package works, the HTML markup (Shadow DOM) is isolated, so I did so to create a component with your package:

• my-button (folder)
  • my-button.html (the Blaze template)
  • my-button.css (for style this web-component I use that my-button::shadow {...}, so each web-component is unique element, this works for now)
  • my-button.js (for manipulate an element from this component I need get the "id" of the target, but using that on rendered callback I can: this.find('#element-id'), but not with jQuery because of the DOM isolation, but Meteor do the job)

So this issue is because I'm trying get the element by ID/CLASS using jQuery, but then I get this with Meteor.find, like I said. Solved!

But another question: you see that Shadow DOM generated has a <style> tag, so if we can get the styles from the CSS files of web-component (my-button/my-button.css) and put in that tag will be great, in this mode we can styles with DOM isolation, for default styles, and not need using the ::shadow (because that broken on some browsers yet), and that concept is the correct for web-components. So, if you get this will be awesome.

Thanks again.

[jadsonlourenco]

Well, my question is resolved, and the second question I asked last answer also, that already exists, but you have to write the CSS when registers a component, thus the style is within the correct tag <style>, inside the Shadow DOM.

Thank you!