Creating Components via JavaScript

[wuda-io]

Before submitting...

• [X] I have searched for duplicate or closed issues.
• [X] I have read the CONTRIBUTING document and my issue is following the guidelines.
• [X] I have read the template completely before filling it in.

Context

Parsing components from the DOM Tree is at the moment the only direction to go. What do you think of the other direction, and create Components via JS. Also we can then make like Configurators for each Component in the Documentation. What do you think? I will try to inplement a proof of concept for the Button Component soon.

First i thought to implement this via webcomponents, but i think it should always work without javascript too. And as far as i know, webcomponents do not work without JS. So this would be a good compromise i think.

Looking forward for your feedback! Thank you guys

Current Behavior

Only parsing components from the Dom is possible.

Expected behavior

Going both directions would be awesome. Parsing from Dom and creating Dom Elements.

Possible Solutions or Causes

const btn = M.Button.create();

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Additional information you want to tell us:

[warrenspe]

It's funny because I often find myself irked when I need to access some bit of configuration (like accordion mode for collapsibles) that can only be accessed by initializing an element via JS; where there's no way to set it via the DOM.

But I'm sure that some folks would find this useful

[wuda-io]

Hey, thanks for your comment. Yes, the current process via initializing it after the html is a bit complicated and often creates additional confusion. I think of it in 2 ways:

1. parsing/init from the DOM and reconfigurating
2. Creating DOMElements from JS Side I think it also would be cool for generating Templates.

[danice]

Some thoughts:

I think we should be very cautious with webcomponents, as they completely change the look of html. Most of materialize components could be thought as extesions of existing html elements as \ and I don't think is a good idea to create webcomponents for that (for example AFAIK "Angular material" does not use components for button)

Said that we need to attach the problem of using materializecss in ShadowDOM, as asked in https://github.com/materializecss/materialize/issues/53

Also this would be a good moment to consider integration with frameworks, and prepare examples as in fast components and in Kickstand UI. Of course, as we use standart html elements there is the usual bindings, but maybe we need to check how methods and events work in some frameworks.

[wuda-io]

@danice yes, I mean to not use webcomponents at all, just to generate the html for the Components via Js.

The problem with webcomponents is, that we depend on JS, so thats not what we should aim for. We should always prefer a CSS Solution over JS.

So i mean an opposite of the Init function. Like a Create function or so.