What is the "right" way to nest components?

This seems like a very basic questions, but neither the documentation nor code examples I found were able to tell me.

Given the following example:

import { FlowIdentification } from "./flow-identification";

@customElement("bb-flow")
export class Root extends LitElement {
//...
 render() {
    return html`<div>${new FlowIdentification()}</div>` 

// WORKS! Better for typisation?

But this also works and is probably recommended:

import "./flow-identification";

@customElement("bb-flow")
export class Root extends LitElement {
//...
 render() {
    return html`<div><flow-identification></flow-identification></div>` 

But don't we lose the typings in the second approach? And does the first approach even make sense? I'm confused.

Would be cool if we could get a "How to nest components" chapter in the docs. :)