如何用JavaScript创建被浏览器大纲模型识别为分段内容的自定义元素？

Absolutely! You can create custom elements that are natively recognized as sectioning content by the browser's outline model—no need to wrap them in a <section> tag. The key is to extend a native sectioning element (like <section>, <article>, <nav>, or <aside>) rather than building an autonomous custom element from scratch. Here's how to do it:

How It Works #

The browser's outline algorithm relies on native HTML elements with inherent sectioning semantics. By extending one of these elements with a custom class, your component inherits all the semantic behavior of the original—including being treated as a section in the document outline.

Implementation Steps #

1. Define the Custom Element Class #

Create a class that extends HTMLSectionElement (or another sectioning element like HTMLArticleElement):

class CustomSection extends HTMLSectionElement {
  constructor() {
    super(); // Required: Call the parent class constructor first
    
    // Add custom behavior or styling here
    this.style.marginBottom = '1.5rem';
    this.style.borderLeft = '4px solid #2196F3';
    this.style.paddingLeft = '1rem';
  }

  // Optional: Run logic when the element is added to the DOM
  connectedCallback() {
    console.log('Custom section attached to the document');
  }
}

2. Register the Custom Element #

Register your class as a customized built-in element, specifying it extends <section>:

customElements.define('custom-section', CustomSection, { extends: 'section' });

3. Use the Custom Element in HTML #

To use your custom section, either:

• Use the native <section> tag with the is attribute (standard, widely supported approach):

  <section is="custom-section">
    <h2>My Custom Section</h2>
    <p>This content will appear as a section in the browser's document outline.</p>
  </section>
  

• Or, in modern browsers that support it, use the custom tag directly (shorter syntax, note: not universally standardized yet):

  <custom-section>
    <h2>Another Custom Section</h2>
    <p>Same semantic behavior, cleaner markup.</p>
  </custom-section>
  

Why This Works #

Since your custom element inherits from HTMLSectionElement, it has the exact same semantic meaning as a native <section>. When you inspect the document outline (e.g., in Chrome DevTools > Accessibility > Document Outline), it will appear as a section just like the native element would.

What About Autonomous Custom Elements? #

If you create an autonomous custom element (one that extends HTMLElement instead of a native sectioning element), it won't be recognized as sectioning content by the outline model—even if you add role="section". ARIA roles help assistive technologies, but they don't affect the browser's outline algorithm. So wrapping in a <section> would still be necessary in that case.

Browser Support #

Customized built-in elements are supported in all modern browsers: Chrome, Firefox, Edge, and Safari 14.1+. For older browsers, you can use a polyfill like @webcomponents/custom-elements to add support.

内容的提问来源于stack exchange，提问作者George Mauer