Benji598 Comments - Answer Overflow

I wrapped the content in a display grid and applied a margin-top: auto; to your footer tag forcing the footer to the bottom. I wouldn't use position absolute as it will take it out of the flow of the document 😉 hope this helps

7 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

Ok so I was wrong in the custom events.... I had misread that a custom event is what a normal event does and bubbles up so e.g. if a user clicked a button and you wanted the parent to catch that event and then do something with it..... to pass an object between components you would have to do this.....

const dispatch = document.createElement('template');

dispatch.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(dispatch.content.cloneNode(true));
  }

  connectedCallback() {
    this.passDataToObject();
  }

  passDataToObject() {
    const dataToPass = {
      name: 'Ben',
      lastName: 'Hewart',
      message: 'Hello Parent Dispatch',
    };

    const child = this.querySelector('recieve-data');
    if (child) {
      child.receiveData(dataToPass);
    }
  }
}

customElements.define('dispatch-data', Dispatch);

const dispatch = document.createElement('template');

dispatch.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(dispatch.content.cloneNode(true));
  }

  connectedCallback() {
    this.passDataToObject();
  }

  passDataToObject() {
    const dataToPass = {
      name: 'Ben',
      lastName: 'Hewart',
      message: 'Hello Parent Dispatch',
    };

    const child = this.querySelector('recieve-data');
    if (child) {
      child.receiveData(dataToPass);
    }
  }
}

customElements.define('dispatch-data', Dispatch);

const recieve = document.createElement('template');

recieve.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(recieve.content.cloneNode(true));
  }

  // connectedCallback() {}

  receiveData(obj) {
    console.log('Received data:', obj.name);
  }
}

customElements.define('recieve-data', Recieve);

const recieve = document.createElement('template');

recieve.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(recieve.content.cloneNode(true));
  }

  // connectedCallback() {}

  receiveData(obj) {
    console.log('Received data:', obj.name);
  }
}

customElements.define('recieve-data', Recieve);

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

Hmn.... That's interesting.... I never even thought of that..... Wonder if it will be worth giving a go

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

But your right you normal extend the parent class

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

You have to extend the HTMLElement in order to create the native web component e.g <dispatch-data> All custom elements need to have a - in then in order to order so they don't class with the reserved element name

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

Javascript 
const dispatch = document.createElement('template');

dispatch.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(dispatch.content.cloneNode(true));

    document.createElement('dispatched-data').append('body');
  }

  connectedCallback() {
    this.dispatchData();
  }

  dispatchData() {
    console.log('disptached');
    const person = {
      name: 'Ben',
      lastName: 'Hewart',
      number: '+4412345678910',
    };

    const sendData = new CustomEvent('person-data', {
      detail: person,
      bubbles: true,
      composed: true,
    });

    // Dispatch the event after the component is connected
    const recieveComponent = this.querySelector('recieve-data');
    if (recieveComponent) {
      recieveComponent.dispatchEvent(sendData);
    }
  }
}

customElements.define('dispatch-data', Dispatch);

Javascript 
const dispatch = document.createElement('template');

dispatch.innerHTML = `

`;

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

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(dispatch.content.cloneNode(true));

    document.createElement('dispatched-data').append('body');
  }

  connectedCallback() {
    this.dispatchData();
  }

  dispatchData() {
    console.log('disptached');
    const person = {
      name: 'Ben',
      lastName: 'Hewart',
      number: '+4412345678910',
    };

    const sendData = new CustomEvent('person-data', {
      detail: person,
      bubbles: true,
      composed: true,
    });

    // Dispatch the event after the component is connected
    const recieveComponent = this.querySelector('recieve-data');
    if (recieveComponent) {
      recieveComponent.dispatchEvent(sendData);
    }
  }
}

customElements.define('dispatch-data', Dispatch);

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

I'll send the code

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

how do you send code blocks on discord btw?

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

nice one

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

well you won't believe it! it works!!!!!

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

hey i'm open to anything at this point, lets give it a go....

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

yeah exactly.... according to what I have read if the receive component is fired first and completes, before the dispatch event fires it should in "theory" catch the event..... if we change it to window.addEventListener the object gets passed... I was just trying to keep the components contained

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

I know... its confused me to... listening on itself... but apparently its correct.... apparently you should be able to pass an object between the two components. hahah! its ok I already noticed, it not for a portfolio I already have a job as a FE dev... but I just want to keep expanding my knowledge.. and exposing myself to new tech.

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

Thank you for your speedy response... according to custom events the custom event is person-data and thats what the child listens for in the receive js so not quite sure what the crack is with it... I have even stuck it in ChatGPT and it says it should work but it doesn't haha! the only other way is to use this.parentNode.addEventListener so then it listens directly to the parent but I'm not sure if this is good practice?

29 replies

KPCKevin Powell - Community

•Created by Benji598 on 12/6/2023 in #front-end

Passing Objects in Native Web Components

29 replies

KPCKevin Powell - Community

•Created by Anonymous DEV on 11/26/2023 in #front-end

image stretching

Hello, Try this..... img { max-width: 100%; height: auto; display: block; } this makes images responsive, if the image is to big you need to resize the image. A better way is to use something like a picture tag where you can create different size images for different breakpoints 😉 Hope this helps

3 replies

Gaming

Programming