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>
Submit an article or tip