Issue with styling <vaadin-app-layout> containers

Flow
1

Sorry i’m still new to manipulating styles on Shadow DOM elements and webComponents in general. I’m having some issues with styling containers.

Before I begin, I do have css resets on my basic HTML elements, namely:
*{ margin: 0; padding: 0}

Code:
Index.html

<body>
  <main> 
    <!-- Entry point for root of vaadin navigation router web components -->
  </main>
</body>

index.js:

import './views/nav-view-vaadin.js'

import { Router } from '@vaadin/router'; //navigation router

window.addEventListener('load', () => {
  initRouter();
});

function initRouter() {
  const router = new Router(document.querySelector('main'));
  router.setRoutes([
    {
      path: '/',
      component: 'nav-view-vaadin'
    }
  ])
}

nav-view-vaadin.js:

import { LitElement, html } from 'lit-element';
import '@vaadin/vaadin-app-layout/vaadin-app-layout.js';
import '@vaadin/vaadin-app-layout/vaadin-drawer-toggle.js'
import '@vaadin/vaadin-tabs/vaadin-tab.js';
import '@vaadin/vaadin-tabs/vaadin-tabs.js';
import '@polymer/iron-icon';
import { registerStyles} from '@vaadin/vaadin-themable-mixin/register-styles.js'
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';

registerStyles('vaadin-app-layout', css `
  [part="navbar"]
 {
    background-color: darkgrey;
    height: 100px;
  }[part="navbar"]
::before{
    opacity: 0;
  }
  [part="content"]
 {
    background-color: black;
  }
`);
class NavViewVaadin extends LitElement{
  //static get styles() { return [ navStyles ]
 }
  render() {
    return html`
<custom-style>
  <style include="lumo-typography lumo-color">
  .content {
    background-color: blue;
    display: inline-block;
  }
  </style>
</custom-style>
<vaadin-app-layout primary-section="drawer">
  <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
  <img slot="navbar" src="https://i.imgur.com/GPpnszs.png" alt="Vaadin Logo" width="100" height="31" referrerpolicy="no-referrer">
  <vaadin-tabs slot="drawer" orientation="vertical" theme="minimal" style="margin: 0 auto; flex: 1;">
    <vaadin-tab>
      <iron-icon icon="vaadin:home"></iron-icon>
      Hardware inventory
    </vaadin-tab>
    <vaadin-tab>
      <iron-icon icon="vaadin:list"></iron-icon>
      Azure AD search
    </vaadin-tab>
    <vaadin-tab>
      <iron-icon icon="vaadin:options"></iron-icon>
      Order Hardware
    </vaadin-tab>
    <vaadin-tab>
      <iron-icon icon="vaadin:question"></iron-icon>
      Order History
    </vaadin-tab>
  </vaadin-tabs>

  <div class="content">
    Hello World
  </div>
</vaadin-app-layout>
    `
  };
};
customElements.define('nav-view-vaadin',NavViewVaadin)

Question #1: There is padding/margin between the navbar container and the content container, how do I make the content of the div container flush with navbar, and which shadow dom part do I need to target for styling? I attached the image of the spacing below.

Question 2 below :slight_smile:

2

Question #2: Why is [part="content"] {background-color: black;} not targeting styling on the content div container, but <style>.content { background-color: blue }</style> is? Should I not be targeting the shadowDOM part as per the documentation?

Vaadin documentation says there are 3 Shadow DOM parts avalaiable for styling: navbar, drawer, and content. Navbar and Drawer are fine, content is the only one not working according to docs.

Thanks.
18300504.png

3

Hello!

  1. There seems to be an issue in documentation of the content part as it seems to be an attribute now.
  2. If I understand correctly you do not want to have drawer be opened as an overlay. That can be controlled with --vaadin-app-layout-drawer-overlay by the docs.

To achieve the desired outcome, you need to modify nav-view-vaadin.js registerStyles part to be as follows:

:host {
  --vaadin-app-layout-drawer-overlay: false;
}
[part="navbar"]
 {
  background-color: darkgrey;
  height: 100px;
}
[part="navbar"]
::before{
  opacity: 0;
}
[content]
 {
  background-color: black;
}

Hope it helped. If you have further questions, feel free to ask.

Best regards,
Yuriy