Replacing content of multiple containers

[k16e-me]

Describe the problem 🧐

Currently, only contents within the swup container are swapped/replaced on new page entry. Anything outside is typically left alone. If the head plugin is used, things like title tag and other meta with changing contents get updated. But other than those, there isn't a way to just drop an attribute on a markup which then instructs Swup to watch for it when page changes and swap its content, much like you can drop in a "persist" attribute on an element and Swup knows to leave it alone when swapping pages.

Describe the propsed solution 😎

Provide a way with a simple attribute such as data-swup-swap or something along that line for Swup to watch for it when page changes and swap its content.

Alternatives considered 🤔

None

How important is this feature to you? 🧭

Would make my life a lot easier

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

You can have as many containers as needed: the containers option accepts multiple selectors and isn't limited to a single one. Replacing a main content area as well as a navigation would look like this:

const swup = new Swup({ containers: ['main', 'nav'] })

This would require that both containers are always available on all pages. To replace some containers only in certain conditions, you can modify the containers for each visit in a hook:

swup.hooks.on('visit:start', (visit) => {
  if (visit.to.url === '/about') {
    visit.containers.push('#sidebar')
  }
})

I'll close this as already implemented, but let me know if I misunderstood your feature request.

[k16e-me]

Yes, that explains it. So, it's to define in the script where you want Swup to "swap" content, etc. While doing containers: ['#swup', '#page-title'] works inside the swup call. It'd still be nice to just drop a class/attribute inside the element and voila. But thanks for seeing me through.

[daun]

@k16e-me Exactly. The morph plugin comes close to what you're suggesting, it also replaces parts of the pages marked with data attributes. The only "downside" is that it updates elements without animation. Depending on your use case, that might be okay however. It's mostly meant for permanent elements that need to update state or classes, like menus and footers.

<nav data-swup-morph="nav">
  <!-- Morphed by the morph plugin -->
</nav>
<main id="swup">
  <!-- Replaced normally by swup -->
</main>

[k16e-me]

O, I'll look more into morph but might not use it for this case (especially needing to avoid any downsides).

[k16e-me]

Hi, I'm cycling back to this as I'm observing that if the element to "morph" seems to be just a single/simple tag, swup is skipping it. You can observe the behavior here https://jee-v2.k16e.co/ as you navigate from page to page, the body's main h1 tag with id='title-hidden' and data-swup-morph='title-hidden' is not getting its content swapped on page changes... and by my design, since I don't want body to have an "Untitled Body", is how each page gets a global h1, so unless you hard refresh, this is not being "morphed"/swapped

[daun]

Where is that h1 tag you've mentioned? I can only see a footer with a morph attribute. The h1 that is present has no morph attribute on it, so it makes sense that it doesn't update.

[hirasso]

I think there could be a misunderstanding here. data-swup-morph does not target an element with a matching id attribute. Instead, it looks for an element in the next document with exactly the same value for data-swup-morph.

[k16e-me]

So weird how it gets removed each time on live

So, I just want the value of title hidden to be changing from page to page like the rest of the content, but it stays the same unless full refresh.

[daun]

Not sure how your TitleHidden component looks like, but if you find a way to make those attributes stick around, it should all work as intended.

[k16e-me]

O, you're correct. It was because my attributes weren't percolating since (using Astro) I hadn't explicitly declared for the comp to take additional props where called. It's "morphing" now as desired. Thanks a lot @daun