Click here to Skip to main content
15,506,981 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
YouTube has html tags that start with yt-. For example, yt-page-navigation-progress or ytd-watch-flexy.
Is this a new technology in html5? I'm wondering if this works in all browsers and there's nothing wrong with it?
Also can JavaScript read this property? And can anyone create and use arbitrary tags? Is there a special format if you can make it?
Even though the data- attribute is added to html5, why does YouTube create and use such a thing?

What I have tried:

<ytd-video-quality-promo-renderer id="speedyg" class="style-scope ytd-watch-flexy"><!--css-build:shady--><div id="container" class="style-scope ytd-video-quality-promo-renderer">
  <yt-notification-action-renderer id="notification" duration="0" class="style-scope ytd-video-quality-promo-renderer" ui-refresh=""><!--css-build:shady-->
<tp-yt-paper-toast id="toast" allow-click-through="" class="toast-button style-scope yt-notification-action-renderer" aria-hidden="true" style="outline: none; display: none;"><!--css-build:shady--><span id="label" class="style-scope tp-yt-paper-toast"></span>

  <div id="text-container" class="style-scope yt-notification-action-renderer">
    <yt-formatted-string id="text" respect-html-dir="" split-lines="" class="style-scope yt-notification-action-renderer">동영상 중단 현상이 발생합니까?</yt-formatted-string>
    <yt-formatted-string id="sub-text" respect-html-dir="" split-lines="" class="style-scope yt-notification-action-renderer" hidden=""><!--css-build:shady--></yt-formatted-string>
  </div>
  
    <yt-button-renderer id="action-button" class="style-scope yt-notification-action-renderer" use-keyboard-focused="" is-paper-button=""><a class="yt-simple-endpoint style-scope yt-button-renderer" tabindex="-1" href="https://www.google.com/get/videoqualityreport/?v=VNk15HVtlR0"><tp-yt-paper-button id="button" class="style-scope yt-button-renderer" style-target="host" role="button" tabindex="0" animated="" elevation="0" aria-disabled="false" aria-label="원인 알아보기"><!--css-build:shady--><yt-formatted-string id="text" class="style-scope yt-button-renderer">원인 알아보기</yt-formatted-string></tp-yt-paper-button></a></yt-button-renderer>
  <dom-if class="style-scope yt-notification-action-renderer"><template is="dom-if"></template></dom-if>
  <yt-icon-button class="style-scope yt-notification-action-renderer" hidden=""><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="취소">
    <yt-icon icon="yt-icons:close" class="style-scope yt-notification-action-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M12.7,12l6.6,6.6l-0.7,0.7L12,12.7l-6.6,6.6l-0.7-0.7l6.6-6.6L4.6,5.4l0.7-0.7l6.6,6.6l6.6-6.6l0.7,0.7L12.7,12z" class="style-scope yt-icon"></path></g></svg><!--css-build:shady--></yt-icon>
  </button><yt-interaction id="interaction" class="circular style-scope yt-icon-button"><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></yt-icon-button>
  
    <yt-icon id="close" icon="yt-icons:dismissal" class="style-scope ytd-video-quality-promo-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M12.7,12l6.6,6.6l-0.7,0.7L12,12.7l-6.6,6.6l-0.7-0.7l6.6-6.6L4.6,5.4l0.7-0.7l6.6,6.6l6.6-6.6l0.7,0.7L12.7,12z" class="style-scope yt-icon"></path></g></svg><!--css-build:shady--></yt-icon>
  

</tp-yt-paper-toast>
</yt-notification-action-renderer>
</div>
</ytd-video-quality-promo-renderer>
Posted
Updated 3-May-22 17:42pm

1 solution

Html 5 can have custom elements. Have a read of this help: Using custom elements - Web Components | MDN[^]

And this article goes into a little bit more detail: Custom Elements: defining new elements in HTML - HTML5 Rocks[^]
 
Share this answer
 
v2
Comments
Chopin2001 3-May-22 23:44pm    
Thanks so much. It's very helpful.
Graeme_Grant 4-May-22 0:19am    
No problems.
Chopin2001 4-May-22 10:45am    
May I ask you one more question?
The following css properties seem different from element definitions. Can I get any information related to this? What is the --yt-spec-text-primary? how to use it?
yt-formatted-string.ytd-comments-header-renderer {
color: var(--yt-spec-text-primary);
}
html, [light] {
--yt-spec-brand-background-solid: #fff;
--yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98);
--yt-spec-brand-background-secondary: rgba(255, 255, 255, 0.95);
--yt-spec-general-background-a: #f9f9f9;
--yt-spec-general-background-b: #f1f1f1;
--yt-spec-general-background-c: #e9e9e9;
--yt-spec-error-background: #181818;
--yt-spec-text-primary: #030303;
--yt-spec-text-primary-inverse: #fff;
--yt-spec-text-secondary: #606060;
--yt-spec-text-disabled: #909090;
--yt-spec-call-to-action: #065fd4;
--yt-spec-call-to-action-inverse: #3ea6ff;
--yt-spec-suggested-action: #def1ff;
--yt-spec-icon-active-other: #606060;
--yt-spec-icon-inactive: #909090;
--yt-spec-icon-disabled: #ccc;
--yt-spec-badge-chip-background: rgba(0, 0, 0, 0.05);
--yt-spec-verified-badge-background: rgba(0, 0, 0, 0.15);
--yt-spec-button-chip-background-hover: rgba(0, 0, 0, 0.1);
--yt-spec-touch-response: #000;
--yt-spec-touch-response-inverse: #fff;
--yt-spec-brand-icon-active: #f00;
--yt-spec-brand-icon-inactive: #606060;
--yt-spec-brand-button-background: #c00;
--yt-spec-brand-link-text: #c00;
--yt-spec-wordmark-text: #212121;
--yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1);
--yt-spec-snackbar-background: #212121;
--yt-spec-snackbar-background-updated: #181818;
--yt-spec-error-indicator: #990412;
--yt-spec-themed-blue: #065fd4;
--yt-spec-themed-green: #107516;
--yt-spec-ad-indicator: #00716c;
--yt-spec-themed-overlay-background: rgba(255, 255, 255, 0.7);
--yt-spec-commerce-badge-background: #deffde;
--yt-spec-static-brand-red: #f00;
--yt-spec-static-brand-white: #fff;
--yt-spec-static-brand-black: #212121;
--yt-spec-static-clear-color: rgba(255, 255, 255, 0);
--yt-spec-static-clear-black: rgba(0, 0, 0, 0);
--yt-spec-static-ad-yellow: #fbc02d;
--yt-spec-static-grey: #606060;
--yt-spec-static-overlay-background-solid: #000;
--yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8);
--yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6);
--yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3);
--yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1);
--yt-spec-static-overlay-text-primary: #fff;
--yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);
--yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);
--yt-spec-static-overlay-call-to-action: #3ea6ff;
--yt-spec-static-overlay-icon-active-other: #fff;
--yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7);
--yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3);
--yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1);
--yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3);
--yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);
--yt-spec-assistive-feed-vibrant-gradient-1: #007a65;
--yt-spec-assistive-feed-vibrant-gradient-2: #7f0e7f;
--yt-spec-assistive-feed-vibrant-gradient-3: #ff8983;
--yt-spec-assistive-feed-themed-gradient-1: #d4fff8;
--yt-spec-assistive-feed-themed-gradient-2: #ffdeff;
--yt-spec-assistive-feed-themed-gradient-3: #ffe6e6;
--yt-spec-call-to-action-faded: rgba(6, 95, 212, 0.3);
--yt-spec-call-to-action-hover: #0551b4;
--yt-spec-brand-button-background-hover: #990412;
--yt-spec-brand-link-text-faded: rgba(204, 0, 0, 0.3);
--yt-spec-filled-button-focus-outline: rgba(0, 0, 0, 0.6);
--yt-spec-static-overlay-button-hover: rgba(255, 255, 255, 0.5);
--yt-spec-filled-button-text: #fff;
--yt-spec-paper-tab-ink: rgba(0,
Graeme_Grant 4-May-22 10:51am    
I am not familiar with YouTube Custom Elements, sorry.
Chopin2001 4-May-22 11:21am    
OK. Thanks :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900