Home > Net >  Is the video tag already a WebComponent?
Is the video tag already a WebComponent?

Time:06-21

I am studying the topic WebComponent and by chance I came across a video tag. And for me it looks like this is a WebComponent in which you pass the video source via slots.

Question 1: Is this correct?

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Question 2: What other native WebComponents are available?

CodePudding user response:

No.

The video element is defined in the core HTML specification (as is the source element).

Web Components are a collection of technologies used to extend HTML (with custom elements).

CodePudding user response:

Yes, but...

The <video> Element is built (by Browser vendors) using Web Component technology; you can tell by the shadowRoot it has.

And your code example, that shows how to use the <video> tag, using Web Components syntax, where lightDOM is being reflected to shadowDOM (but the <source> tag is a standard HTML5 tag, not a Custom Element.

Same applies to some other "complex" elements; like text inputs.

But; you have to make a distinction between User-Agent Web Components.

And "UserLand" Web Components created with the CustomElements API

Note your Custom Element indicates an "open" (or "closed") shadowRoot; NOT (user-agent)

So in practice you can't do anything with this knowledge. Other then tell everybody "Web Components" have been around for ages.

As for creating tags; you are not bound to Custom Elements; see my blog post: https://dev.to/dannyengelman/web-components-using-unknownhtmlelements-for-better-semantic-html-5d8c

  • Related