web component - ShadowRoot layer will not honor console.log("xyz") or warn. Nothing gets printed after it exec

admin管理员组

文章数量:1403369

When I set breakpoint on the console.log and warn statements they are hit. However, looking at the console shows nothing.

constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <link rel="stylesheet" href="./header-component.css">
            <header>
                <div class="nav-links" id="nav-container">
                    <button type="button" id="add-image">Add Image</button>
                    <button type="button" id="add-label">Add Label</button>
                </div>
                <slot name="header-content">Default Header Content</slot>
            </header>
        `;

        customElements.whenDefined(headerComponent).then(() => {
            requestAnimationFrame(() => {
                const button = this.shadowRoot?.querySelector("button");
                console.log(`Adding click handler ${headerComponent}`)  <=======
                    button.addEventListener('click', () => console.log("Clicked"));
                } else {
                    console.warn("Button not found inside shadowRoot"); <=======
                }
            });
        });

When I set breakpoint on the console.log and warn statements they are hit. However, looking at the console shows nothing.

constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <link rel="stylesheet" href="./header-component.css">
            <header>
                <div class="nav-links" id="nav-container">
                    <button type="button" id="add-image">Add Image</button>
                    <button type="button" id="add-label">Add Label</button>
                </div>
                <slot name="header-content">Default Header Content</slot>
            </header>
        `;

        customElements.whenDefined(headerComponent).then(() => {
            requestAnimationFrame(() => {
                const button = this.shadowRoot?.querySelector("button");
                console.log(`Adding click handler ${headerComponent}`)  <=======
                    button.addEventListener('click', () => console.log("Clicked"));
                } else {
                    console.warn("Button not found inside shadowRoot"); <=======
                }
            });
        });

• web-component

Share Improve this question Follow asked Mar 12 at 14:16 JWPJWP 6,97533 gold badges5757 silver badges7777 bronze badges 5

• Where's headerComponent? – zer00ne Commented Mar 12 at 15:43
• developer.mozilla./en-US/docs/Web/HTML/Element/header – JWP Commented Mar 13 at 15:31
• Where in the code is headerComponent defined? – zer00ne Commented Mar 13 at 17:24
• Header is a semantic element just like Div. – JWP Commented Apr 8 at 20:46
• I figured that. Do you have code that actually defines headerComponent? If so, where? – zer00ne Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

shadowDOM (or anything) can not block console output.

► A. check devtools for filtering options.

► B. does any other code overload console?

Side Note

Working with HTML is great when working with HTML.
Nodes, methods and properties are easier with createElement

<script>
customElements.define('custom-buttons', class extends HTMLElement {
  constructor() {
  // yes, you can use JavaScript *before* the super() call
  const createElement = (tag,props) => Object.assign(document.createElement(tag),props);
  super() // set and return 'this' scope
    .attachShadow({ mode: 'open' }) // set and return 'this.shadowRoot'
    .append(
       createElement("style",{
         innerText: `button{cursor:pointer;color:green}`
       }),
       this.addIMG = createElement('button', {
         type: "button",
         textContent : "add Image",
         onclick : (evt) => console.log( this.addIMG.textContent )
       }),
       this.addLabel = createElement('button', {
         type: "button",
         textContent : "add Label",
         onclick : (evt) => console.log( this.addLabel.textContent )
       })
     )// append
  } // constructor
})
</script>
<custom-buttons></custom-buttons>

本文标签：