如何创建具有无障碍功能的自定义HTML元素

huangapple go评论51阅读模式
英文:

How can I create a custom HTML element with accessibility

问题

无法键盘访问的元素

英文:

How can I create a custom HTML element that can be styled with CSS and have specific behaviors, such as click events, proper semantics, and accessibility? Are there any best practices for defining specific behaviors for custom HTML elements using event listeners? What are some examples of custom HTML elements that have been successfully implemented on websites

<!DOCTYPE html>
<html>
<head>
	<title>Custom HTML Element Example</title>
	<style>
		.custom-element {
			background-color: #ccc;
			padding: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<custom-element >Click me</custom-element>

	<script>
		class CustomElement extends HTMLElement {
			constructor() {
				super();
				this.addEventListener('click', () => {
					alert('You clicked the custom element!');
				});
			}
		}

		window.customElements.define('custom-element', CustomElement);
	</script>
</body>
</html>

element is not keyboard accessible

答案1

得分: 0

FYI:您的点击只在此处起作用,因为您在DOM中解析<custom-element>之后定义了组件。默认情况下,在constructor中没有创建DOM(尝试使用document.createElement("custom-element")会导致错误)。

connectedCallback会告诉您元素实际上在DOM中时,那时您可以分配事件。

<!-- 开始代码片段:js 隐藏:false 控制台:true babel:false -->

<!-- 语言:lang-html -->

&lt;style&gt;
  .custom-element {
    background-color: #ccc;
    padding: 10px;
    cursor: pointer;
  }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;custom-element&gt;单击我&lt;/custom-element&gt;

  &lt;script&gt;
    customElements.define(&#39;custom-element&#39;, class extends HTMLElement {
      //constructor() {
        //super();
        // 仅在此处设置属性或shadowDOM
        // 此元素尚未在DOM中!
      //}
      connectedCallback(){
        // 可以在此处执行oldskool内联点击
        // 因为(原则上)页面中没有其他代码
        // 应该干扰此组件
        this.onclick = () =&gt; alert(&quot;内联点击!&quot;);

        this.addEventListener(&#39;click&#39;, () =&gt; {
          alert(&#39;您单击了自定义元素!&39;);
        });
      }
    });
  &lt;/script&gt;

<!-- 结束代码片段 -->

英文:

FYI: Your click only works here because you defined the component after &lt;custom-element&gt; was parsed in the DOM. By default there is no DOM created in the constructor (try a document.createElement(&quot;custom-element&quot;); it will error.

The connectedCallback tells you when the element is actually in the DOM, and that is when you can assign Events.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;style&gt;
  .custom-element {
    background-color: #ccc;
    padding: 10px;
    cursor: pointer;
  }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;custom-element&gt;Click me&lt;/custom-element&gt;

  &lt;script&gt;
    customElements.define(&#39;custom-element&#39;, class extends HTMLElement {
      //constructor() {
        //super();
        // only set properties or shadowDOM here
        // this element is NOT in the DOM yet!
      //}
      connectedCallback(){
        // might as well do oldskool inline clicks here
        // because (in principle) no other code in the page
        // should mess with this component
        this.onclick = () =&gt; alert(&quot;inline click!&quot;);

        this.addEventListener(&#39;click&#39;, () =&gt; {
          alert(&#39;You clicked the custom element!&#39;);
        });
      }
    });
  &lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 22:14:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76219490.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定