Custom elements that use the `is` syntax to extend native elements must be
created imperatively like this:
document.createElement('button', 'foo-element');
There's more info here for reference:
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
On Fri, Aug 29, 2014 at 9:37 AM, <[email protected]> wrote:
> Thanks for the tip !
>
> I'm having trouble to make it work with elements that extends Native HTML
> elements.
>
> I noticed that when using the `constructor` attribute in polymer-element,
> it will smartly returns a fully working element (let's say FooElement
> extends button) :
> <button is="foo-element">...</button>
>
>
> So I tweaked your function like this : (let's say FooElement extends
> button)
>
> foo.space.FooElement = function() {
> var el = document.createElement('button');
> el.setAttribute('is','foo-element')
> return el;
> }
>
> which returns in appearance the same thing as the constructor defined as
> attribute, but that is in fact just a simple button with a dummy "is"
> attribute.
>
> Any ideas on how to make namespace constructor of elements that extend
> native Html ?
>
> Thanks
>
>
> Le jeudi 14 août 2014 02:57:56 UTC+2, Scott Miles a écrit :
>>
>> One possibility is to make a custom constructor:
>>
>> <script>
>> foo.space.FooElement = function() {
>> return document.createElement('foo-element');
>> }
>> </script>
>>
>> you can also use this technique to make constructors that take arguments.
>>
>>
>> On Mon, Aug 11, 2014 at 2:16 PM, Vicențiu Ciorbaru <[email protected]>
>> wrote:
>>
>>> I've opened an issue there to a link to this thread. It would be helpful
>>> to have any potential workaround ideas in the meantime, if you have any.
>>>
>>> Vicențiu
>>>
>>>
>>> On Monday, August 11, 2014 10:06:40 PM UTC+1, Steve Orvell wrote:
>>>
>>>> I suggest filing an issue here: https://github.com/Polym
>>>> er/polymer-dev/issues.
>>>>
>>>>
>>>> On Mon, Aug 11, 2014 at 1:35 PM, Vicențiu Ciorbaru <
>>>> [email protected]> wrote:
>>>>
>>>>> Hi polymer devs,
>>>>>
>>>>> I've recently been involved in porting the trace-viewer[1] project
>>>>> bundled with Google Chrome to use Polymer.
>>>>>
>>>>> Given the size of the project, and the fact that it's mostly just one
>>>>> big page, we've run into the need to use namespaces for our modules. In
>>>>> order to avoid conflicts we've attempted to implement the rule that each
>>>>> constructor for a polymer element should have a name like:
>>>>>
>>>>> /path/to/file + ElementConstructor => PathToFileElementConstructor
>>>>>
>>>>> Unfortunately, this quickly gets out of hand and has a major
>>>>> readability impact in the code. An example is a polymer element defined in
>>>>> the file /tracing/analysis/analysis-view.html. This ends up being
>>>>> TracingAnalysisAnalysisView. What would be really useful is to be able to
>>>>> export the constructor of the element within a namespace, and not have it
>>>>> stuck to the window object.
>>>>>
>>>>> I'm looking for something along the lines of:
>>>>> <polymer-element name="foo-element" constructor="FooElement" namespace
>>>>> ="foo.space">
>>>>> <style>
>>>>> /* css */
>>>>> </style>
>>>>> <template>
>>>>> <!-- More HTML -->
>>>>> </template>
>>>>>
>>>>> <script>
>>>>> Polymer({
>>>>> ready: function(){
>>>>> this.barProperty = [];
>>>>> }
>>>>> });
>>>>> </script>
>>>>> </polymer-element>
>>>>>
>>>>> /* some other file */
>>>>> <link rel="import" href="foo/space/foo_element.html">
>>>>>
>>>>> <script>
>>>>> var fooElement = new foo.space.FooElement();
>>>>> </script>
>>>>>
>>>>>
>>>>> I've read the available documentation on this, but I could not find an
>>>>> appropriate way to actually solve this issue. Is there any trick available
>>>>> to solve this?
>>>>>
>>>>> Regards,
>>>>> Vicențiu Ciorbaru
>>>>>
>>>>> [1] https://code.google.com/p/trace-viewer/
>>>>>
>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>> ---
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "Polymer" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>>> an email to [email protected].
>>>>>
>>>>> To view this discussion on the web visit https://groups.google.com/d/
>>>>> msgid/polymer-dev/ab9aa813-266e-4287-916e-c2595cffcfbc%40googl
>>>>> egroups.com
>>>>> <https://groups.google.com/d/msgid/polymer-dev/ab9aa813-266e-4287-916e-c2595cffcfbc%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>> .
>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>> ---
>>> You received this message because you are subscribed to the Google
>>> Groups "Polymer" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To view this discussion on the web visit https://groups.google.com/d/
>>> msgid/polymer-dev/44c4b3de-6624-4e3d-9ce7-539ac77c3c07%
>>> 40googlegroups.com
>>> <https://groups.google.com/d/msgid/polymer-dev/44c4b3de-6624-4e3d-9ce7-539ac77c3c07%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/2bdfa8bd-97ee-4c45-8590-451a0753607d%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/2bdfa8bd-97ee-4c45-8590-451a0753607d%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgF8ZZg%2B_Hbbd9XaFTRZy4iAGUN2TKwTMCuEV-hXatbqA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
