Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Declarative syntax for custom elements #136

Closed
hayatoito opened this issue Jul 6, 2015 · 5 comments
Closed

Declarative syntax for custom elements #136

hayatoito opened this issue Jul 6, 2015 · 5 comments
Labels
custom-elements v2

Comments

@hayatoito
Copy link
Contributor

Title: Declarative syntax for custom elements (bugzilla: 28545)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28545

comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28545#c0
Ryosuke Niwa wrote on 2015-04-22 23:49:56 +0000.

See https://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0418.html

At some point (perhaps post-V1), there should be a convenient declarative syntax that combines script and a template to define a custom element. JavaScript frameworks on top of web components provide something like this. Perhaps with field experience we can make a standardized common syntax.

Specifically, such a syntax needs to be compatible with an isolated cross-origin component.
@hayatoito hayatoito mentioned this issue Jul 6, 2015
Closed
@annevk annevk changed the title Declarative syntax for custom elements (bugzilla: 28545) Declarative syntax for custom elements Mar 11, 2016
@annevk annevk added the v2 label Mar 11, 2016
This was referenced Mar 11, 2016
Closed
Closed
@treshugart treshugart mentioned this issue Mar 14, 2016
Closed
@ghost
Copy link

ghost commented Jun 10, 2016 •
edited by ghost
Loading

I think a neat way of doing this is allowing people to send a document-fragmentas a property of the define method’s options argument.

<!doctype html>
<html>
    <head>
        <template id="foo" data-custom>foo</template>
        <template id="bar" data-custom>bar</template>
        <template id="baz" data-custom>baz</template>
        <script>
            for(let template of Array.from(document.head.querySelectorAll("template[data-custom]")))
            {
                customElements.define("x-" + template.id, class extends HTMLElement {}, {template: template.content});
            }
        </script>
    </head>
    <body>
        <x-foo></x-foo>
        <x-bar></x-bar>
        <x-baz></x-baz>
    </body>
</html>

Then, when created, x-foos would all have an immutable shadow root. When promoted, x-foos would discard their shadow roots (if they have any) and gain a new immutable one.

@ghost
Copy link

ghost commented Jun 10, 2016

And by “immutable” I mean “unremovable and invisible to the outside world”.

@rniwa
Copy link
Collaborator

rniwa commented Jun 10, 2016

Apple proposed something similar in 2003: https://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0794.html and got veto'ed by Google.

I agree that having a mechanism to automatically instantiate a shadow root with a template content would be useful.

@annevk
Copy link
Collaborator

annevk commented Jul 21, 2016

That is #135 though.

I suggest we close this issue since there's no concrete proposal and we probably want to wait a while to see what libraries come up with.

@hayatoito
Copy link
Contributor Author

Okay. Let's close this.

@js-choi js-choi mentioned this issue Nov 21, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
custom-elements v2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hayatoito @rniwa @annevk