Solved the issue by defining the targets definition in the xml file of the lightning web component.

From the Developer Guide:

There are a few steps to take before you can use your custom Lightning web components to create a Lightning page in Lightning App Builder. One of them is Define Component Metadata in the Configuration File

The .js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

• Define what types of Lightning pages your component can be used on.
• Configure your component’s properties.
• Set your component’s supported objects.
• Make the component usable outside of your own org.

Added Definition:

  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>

The Shadow DOM have three primary effects: DOM access, CSS isolation, and event propagation. LWC components are "first-class" DOM elements. Whenever you're outside the component, you see the component itself instead of its internals or nothing at all (null).

Events

Events now only go up to a Shadow DOM boundary by default, except for "onevent" handlers. This means that events propagate faster by default. You can choose to control the behavior, though. Also, event.target, which could sometimes be either null when outside the component, now returns the component itself as the target in these situations.

CSS

CSS outside the component can now only affect the top-level of the component. This is not the same as Aura, where you could affect internals with CSS. CSS cannot affect parent, child, or sibling CSS. It is completely isolated, which allows a component to appear as the developer intended regardless of what anyone else might do to that component. You can still style the component itself (e.g. put a border around it), and you do so by specifying the component's actual name. Taken from the documentation:

c-child {
    display: block;
    border: 2px solid red;
}

This styles c-child with a block display mode and a solid border of red.

You can respond to class names, though, through the new :host syntax:

:host(.active) {
  background-color: lightgreen; 
} 

Whenever the "active" class is applied to your component, then it changes to light green. The component itself defines how classes can affect it, rather than having the parent force its styles on its children.

DOM

This should be of no surprise, but you can't use things like document.querySelector to find elements outside of your own Shadow DOM. This includes trying to finding elements in parent, sibling, or child components. There is a way to do composition, which is done through <slot> elements. This is similar to Aura's Aura.Component[] and Visualforce's apex:composition.

There's quite a bit more to this, so I suggest you read the Developer Documentation for more details (currently requires a Spring 19 org).