Skip to content

Instantly share code, notes, and snippets.

@tbranyen

tbranyen/01.dynamic-component.js

Last active December 18, 2015 10:49
Show Gist options
  • Save tbranyen/5770992 to your computer and use it in GitHub Desktop.
Save tbranyen/5770992 to your computer and use it in GitHub Desktop.
Download ZIP
Could generate <element>, <template>, <style> under the hood along with setting the correct prototype.
Raw
01.dynamic-component.js
// Include the Component Class.
var Component = require("webapp/component");
// Create a custom Component.
var MyComponent = Component.extend({
// Your custom tag name.
tagName: "my-component",
// Scoped CSS.
style: "@host { font-weight: bold; } p { text-decoration: underline; }"
});
// Register it globally and parse all existing Components in the page.
Component.register(MyComponent).activateAll(document.body);
Raw
02.html
<body>
<!-- Underscore templates are automatically parsed from the markup. -->
<my-component test="hey mang!"><p>Testing this out! <%= test %></p></my-component>
</body>
@sponge
Copy link

sponge commented Jun 13, 2013

Any ideas on how to handle minifying/merging?

@tbranyen
Copy link
Author

It's definitely a concern, don't have something like RequireJS to trace the dependencies for me here, so it would have to be a manual solution at the moment.

Another valid concern was brought up by @jrburke about loading Web Component source automatically upon parsing the HTML.

@tbranyen
Copy link
Author

Here's a scheme.

During compilation it will build out objects mapping the compiled source (template, style, and maybe even script) to their file paths suitable for lookup just like JST. All these assets get built into the application concatenated source.

One downside to this is that it is not intelligent and you will most likely end up building in files you no longer reference. Open to suggestions for that one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment