Stencil: ...

[emolr]

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-name',
  styleUrl: 'my-name.scss'
})
export class MyName {

  @Prop() first: string;
  @Prop() last: string;

  render() {
    return (
      <p>
        <my-child name="Emil" />
      </p>
    );
  }
}

The above code outputs this in the DOM tree:

I'm very amazed about this work, and thank you for the presentation at Polymer Summit 👍

[mlynch]

Hey @emolr, good seeing you last night and thanks for filing the issue :D

I've seen this before, what browser did this come from?

Any other details that might be different from the stock project we should look at?

[davidmpaz]

Hi @mlynch,

I am having same issue. I just follow the steps of the getting started guide. I did push my current hello world app here: https://github.com/davidmpaz/stencil-starter

thanks for this great project,

cheers

[jgw96]

Thanks for the repo @davidmpaz . I can reproduce this issue using your repo. If i change this https://github.com/davidmpaz/stencil-starter/blob/master/src/components/my-first-component/my-first-component.tsx#L14 to a div then i cannot reproduce it.

[davidmpaz]

Hi @jgw96,

thanks for answering. I did notice that with a div tag issue is gone. But I think the important part of this thread is to get to know the cause of this behavior.

From my user point of view having output displayed twice is not correct, I think we must know why is so, is it by design, is it really a bug, or a feature :) where lay the code for this and so on.

cheers

[adamdbradley]

Ok, dug into this more and I think it's a constraint of HTML itself, where a <p> paragraph tag cannot be nested inside of another <p> tag: https://www.sitepoint.com/community/t/p-inside-p/8402

I think it's because stencil is dynamically and asynchronously inserting <p> tags, the browser is more or less rearranging the elements to what's valid (at least that's my guess).

We'll have to update our starts to NOT have <p> at the root.

[davidmpaz]

Hi @adamdbradley. thanks! for taking time to care of this. Is clear now.