Default style of shadow element

Question

I have

main.js and index.html below

class CustomTagA extends HTMLElement {
      constructor() {
        super();

        const shadow = this.attachShadow({mode: 'open'});
        const wrapper = document.createElement('h1');
        wrapper.setAttribute('class', 'wrapper');
        wrapper.textContent = 'Custom Tag A';
        shadow.appendChild(wrapper);
      }
}

class CustomTagB extends HTMLElement {
  constructor() {
       super();

    const shadow = this.attachShadow({mode: 'open'});

    const wrapper = document.createElement('a');
    wrapper.setAttribute('class', 'wrapper');
    wrapper.textContent = 'Custom Tag B';
     shadow.appendChild(wrapper);
  }
}

customElements.define('cutomtag-a', CustomTagA);
customElements.define('cutomtag-b', CustomTagB);

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <cutomtag-a></cutomtag-a>
      <cutomtag-b></cutomtag-b>
      <script src="./main.js"></script>
</body>
</html>

When my code running on browser i have inpect html and discover them. I have few questions about Shadow Element

Where default css of Shadow Host Element?
Why cutomtag-a beak line while it display Inline? Is it because i use h1 tag?What is their working principle? Where can I find documents?

Please add an executable StackOverflow Snippet to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) — Danny '365CSI' Engelman, Oct 15 '22 at 07:56
Yes, that is standard H1 behaviour, has got nothing to do with Web Components — Danny '365CSI' Engelman, Oct 15 '22 at 08:36

Danny '365CSI' Engelman · Answer 1 · 2022-10-16T11:56:37.450

shadowDOM is styled with <style> definitions inside shadowDOM

Or, when using <slot> see (long) SO post: ::slotted CSS selector for nested children in shadowDOM slot

<!-- YOUR JS FILE -->
<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super().attachShadow({mode:'open'})
             .append(document.getElementById(this.nodeName).content.cloneNode(true))
    }
  });
</script>

<!-- YOUR HTML FILE -->
<template id="MY-ELEMENT">
  <!-- goes into shadowDOM -->
  <style>
    h1 {
      background: green;
    }
  </style>
  <h1>Web Component!</h1>
</template>

<style>
  body {
    background: coral;
    color: gold; /* inheritable styles do style shadowDOM */
  }
</style>

<h1>Hello</h1>
<my-element></my-element>

I looking for default of style Shadow DOM but i forget we can define css when create it, thank Danny. — Minh Sự, Oct 16 '22 at 14:10

Default style of shadow element

1 Answers1