[0.8] dom-module nice but not perfect

[gertcuykens]

The example you mentioned template-me what actually indicates already a bit what I mean by perfect.

Nice

<dom-module id="template-me">
  <style>
    div { color: red } 
  </style>
  <template>
    <div>This is local DOM</div>
  </template>  
</dom-module>
<script>
  Polymer({is: "template-me"});
</script>

Perfect

<style id="template-me-style">
    div { color: red } 
</style>
<dom-template id="template-me-dom">
    <div>This is local DOM</div>
</dom-template>
<script>
  Polymer({is: "template-me"});
</script>

[gertcuykens]

or if the style is going to mess with the other styles then you could do it like this
also notice I prefer polymer attributes.

<dom-style polymer="template-me template-me2">
    div { color: red } 
</dom-style>

<dom-template polymer="template-me">
    <div>This is local DOM</div>
</dom-template>

<script>
  Polymer({is: "template-me"});
</script>

You can share dom styles if the polymer attribute allows to define more than one template

[dhubler]

I'd rather see everything inside , script and css like the way
it was in 0.5. then you can only need to specify the custom element name
once (DRY). When 0.5 allowed implicit naming, i was happy because i often
forgot to change one name and wondered why my element silently didn't work.
they must have had their reasons for splitting out <script>, probably
simplified polyfills.

On Tue, Apr 7, 2015 at 6:12 PM Gert Cuykens notifications@github.com
wrote:

or if the style is going to mess with the other styles then you could do
it like this
also notice I prefer attributes.

div { color: red }

This is local DOM

<script> Polymer({is: "template-me"});</script>

You can share dom styles if the polymer attribute allows to define more
than one template

—
Reply to this email directly or view it on GitHub
#1380 (comment).

[matthewrobb]

I'd love to see a well documented public facing imperative api for what dom-module is solving.

[gertcuykens]

<style id="template-style">
    div { color: red } 
</style>

<template id="template-me">
    <div>This is local DOM</div>
</template>

<script>
  Polymer({template: "template-me", style:"template-style"});
</script>

[binoculars]

In the example provided,

<dom-module id="register-me">
  <template>
    <div>Hello from my local DOM</div>
  </template>
</dom-module>

<script>
  Polymer({is: "register-me"});
</script>

I don't see the point of having the id attribute on dom-module (id="register-me") AND in the the Polymer call with {is: "register-me"}. It should be one or the other, and I would prefer it to be in the id attribute to align with the DOM over JavaScript philosophy.

[jlg7]

Hi

This seems to work without the id attribute on the dom-module provided you declare or import the Polymer declaration inside the dom-module. I don't know the full implications of doing it this way but this similar to how I was defining elements in 0.5 substituting dom-module with template.

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">


<dom-module>
    <link rel="import" type="css" href="example-element.css">
    <template>
            <paper-button on-tap="hello">Example Element</paper-button>
    </template>
    <script>
        Polymer({
            is:'example-element',
            hello:function(){ alert('hello!');}
        });
    </script>
</dom-module>

[dhubler]

that's great as it's more DRY like 0.5. seems silly over one value, but i
more than once had the values mismatched.

On Fri, Apr 17, 2015 at 2:33 PM Jon Geho notifications@github.com wrote:

Hi

This seems to work without the id attribute on the dom-module provided
you declare or import the Polymer declaration inside the dom-module. I
don't know the full implications of doing it this way but this similar to
how I was defining elements in 0.5 substituting dom-module with template.

Example Element <script> Polymer({ is:'example-element', hello:function(){ alert('hello!');} }); </script>

—
Reply to this email directly or view it on GitHub
#1380 (comment).

[arthurevans]

I think @jongeho1's example works because of a (deprecated) method of declaring an element where it used a template immediately preceding the script tag. I would not rely on this continuing to work.

I think the point of having an ID on the dom-module is that it lets you deliver the HTML and JavaScript separately. But maybe @sorvell or @kevinpschaaf can shed more light on the reasoning here.

[jlg7]

Thanks @arthurevans. Sounds like there are implications. For custom elements, I think this syntax works well and offers more structure in the composition. Javascript, HTML and CSS may be externalized for development and brought together with a vulcanize. The other syntax is not too far off so not a big deal but be interested to know how long that flavor has to live.

[sorvell]

We're investigating supporting a DRY version of dom-module / Polymer. Otherwise we're satisfied with the syntax.