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.

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

Declarative components proposal #897

Closed
wants to merge 1 commit into from
Closed

Declarative components proposal #897

wants to merge 1 commit into from

Conversation

emanuelhfarias
Copy link

Today to create a web component we have to write a piece of JavaScript code just to register a custom element. Web component needs to give a next step. If we want people to use it more we should let them create small components without friction. A small component is just a custom element for encapsulating template and/or style, no JS required.

A declarative way to define custom elements appears to solve the problem above. Some proposals has already been made, but apparently, none has evolved.

I've been doing some experiments on this topic and I've created a polyfill for the tag <component> which can be the wrapper for declarative define a custom element.

Imagine you can define a custom element like this:

<component name="alert-box" extends="p">
  <style>
    p {
      color: #FFF;
      background-color: #3778e5;
      border-radius: 6px;
      padding: 5px 15px;
    }
  </style>
</component>

<alert-box>some cool text!</alert-box>

You can find several live examples using the polyfill here.

I would like to invite some people to join the conversation:
@ebidel, @rniwa, @trusktr

What do you think?

Thanks

@justinfagnani
Copy link
Contributor

Declarative custom elements is a topic that's come up a lot over the years, and we have a strawman proposal here: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Declarative-Custom-Elements-Strawman.md I think the current implicit status is that we need to get through Template Instantiation, and then a built-in expression syntax that we could use in HTML, before doing a lot more on declarative custom elements, though maybe we could work on them in parallel and maybe the two proposals would lend each other momentum.

I'm very glad to see more interest and new proposals here, though at this point I personally think we'll need more discussions in issues and meetings before another PR, and don't think we should have two proposals in the proposals folder. A new proposal PR right now is likely to have deeps discussion on specifics in review comments that should be had in separate issues.

But a few things on this proposal that I think are worth mentioning:

  1. To be viable, I think declarative custom elements need dynamic templates, we'll need lots of consideration over the data model they have access to and the security implications.
  2. <style> can't just be a child element outside of a template, at least without a new value for type, as it'll apply to the document. We need a solution for adopted style sheets with declarative shadow DOM, so hopefully we can share a solution there with something like <style type="adoptable">.
  3. I don't think we should special case a "root" element in the shadow root, since we haven't yet. :host() isn't inconvenient, IMO. :host([foo=bar]) is barely different than div[foo=bar]. CSS custom state and Accessibility Object Model should alleviate other pressures to have a root element.
  4. For upgrades with a <script> tag we shouldn't need to require anything dynamic wrt the base class. Elements can extend HTMLElement and upgrade as they do now. For association between a script and a declarative definition we should be able to either use a default export for inline scripts, or have a new API to upgrade a declaratively defined element. We have an issue here now: [declarative-custom-elements] how does the class get associated with the definition #884

I think it'd be great to open more issues and discuss this more there and in upcoming meetings.

@emanuelhfarias
Copy link
Author

@justinfagnani thanks for clarify the state we are on declarative custom elements.

I'm closing this PR and I'll read all other discussions and proposals. Probably this way I can contribute more.

One thing though, I miss live examples. All discussions I see so far just show one or two examples.

It would be nice if we have a place to play with declarative components from the discussions.

The website I did for this proposal have this intention. Maybe showing off what can be done with declarative components will get more people's attention.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants