Extending HTML components

[Dragas]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

To be honest, this isn't much of an issue, but rather a question. Would it be possible to extend HTML components, like div, input, span and etc.? This would simplify the current requirement to map all the properties (classes, fields, declarations, events) from underlying template of your custom component to its declaration.

For example, currently you have to:
In polaris-textfield.component.html

<div class="">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text">{{label}}:</label>
    </div>
    <div class="Polaris-TextField">
      <input type="text" class="Polaris-TextField__Input" name="{{name}}" >
      <div class="Polaris-TextField__Backdrop"></div>
    </div>
  </div>
</div>

In polaris-textfield.component.ts

@Component({
  selector: "polaris-text-field",
  templateUrl: "./polaris-text-field.component.html",
  styleUrls: ["./polaris-text-field.component.css", "./../polaris.min.css"]
})
export class PolarisTextFieldComponent implements OnInit
{
  @Input()
  name: string;
  @Input()
  label: string;
  constructor(){}
  ngOnInit(){}
}

And in app.component.html

<polaris-text-field name="CC data" label = "credit card"></polaris-text-field>

Expected behavior

Instead, it would be lovely if you could extend something like Input and then link this component to underlying template's element that would be represented by this component.

What is the motivation / use case for changing the behavior?

It would remove the requirement to map fields to underlying templates.

Environment

Angular version: 4.3.6


Browser:
- [X] Chrome (desktop) Version 60.0.3112.113 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[mlc-mlapis]

What do you mean exactly by extend? Do you have a concrete sample of such syntax? Btw, you can always create your own component that encapsulates <input> and use it later in any place ... for example this is how ControlValueAccessor is used to customize some type of inputs.

[CDDelta]

Have a look at @angular/material. They do the same thing you are looking for with md-form-field and their other components.

[michaeljota]

If I understand this correctly, this is something that should really be considered, as it would simplified the creation of custom elements.

---

The following code examples are as I understand the requirement, or how I would need the requirement. If this is not what OP means, then I would gladly create another issue.

• You need to bind into your component, a regular html attribute.

One possibility is to extends HTMLElement, but...

https://stackblitz.com/edit/angular-extending-html-elements

---

I think the use case of this can very specific, but still, it would be useful, more now that standard custom elements can be created with Angular.

Maybe there are more use cases that can be added. As I understand, this is about reducing the html tree complexity, instead of creating an input in a component, that component is itself an input.

[gund]

I think by "extending" HTML elements they meant being able to base Angular component on some existing HTMLElement.

For example if you want to expose Angular Component as a WebComponent via @angular/elements and extend something like button or input you would want to register it like so:

customElements.define('my-input', createCustomElement(MyInputComponent), {extends: 'input'})

So that later you may use it like so:

<input is="my-input">

But if you will run it like this right now you will get an error: TypeError: Illegal constructor: localName does not match the HTML element interface

This is due to the fact that browser will check if your component class actually extends HTMLInputElement but when you call createCustomElement function it will use HTMLElement as base class and so it will always fail.

The fix here is pretty simple - createCustomElement function may accept optional base class which is by default HTMLElement and then users would simply pass some other type of HTMLElement class.

The example is here: https://stackblitz.com/edit/angular-fmumfu?file=src%2Fapp%2Fapp.module.ts
I demonstrate Angular component that tries to extend input and then native webcomponent that does the same without any issues

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alxhub]

I'm going to close this for a couple reasons:

1. it's a little too vague for a feature request - it's not clear what "extending" an existing HTML element would mean in practice.
2. the host element for a component can be an existing HTML element. You can, for example, use input as a selector and turn <input>s into instances of your component, complete with all of Angular's semantics. Absent any additional context about why this is insufficient, I don't think this request is actionable.

[gund]

I'm sorry but I think it's pretty clear what this feature request is about:

1. We need an option to base custom elements on other (sub)classes then HTMLElement (like HTMLImageElement etc.)
2. It is not enough to just attach Angular component to existing element via a selector as the use-case is very different here - we want to extend existing built-in html elements like img or a and there are plenty of use-cases and spec

All we are asking here is to allow to pass a different subclass of HTMLElement to the createCustomElement() factory function and this will be just enough to support use-case with extending built-in HTML elements.

I hope that with linked examples it's more clear what we are trying to achieve.
Cheers!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}