Diff

const { default: Diff } = await import('/components/data-display/diff.js');
const { tags, $ } = Lightview;

const diff = Diff({ style: 'max-width: 500px; min-height: 300px;' },
    Diff.Item1({ src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' }),
    Diff.Item2({ src: 'https://picsum.photos/600/400', alt: 'After (Color)' }),
    Diff.Resizer({})
);

$('#example').content(diff);

const { default: Diff } = await import('/components/data-display/diff.js');
const { $ } = Lightview;

const diff = {
    tag: Diff,
    attributes: { style: 'max-width: 500px; min-height: 300px;' },
    children: [
        { tag: Diff.Item1, attributes: { src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' } },
        { tag: Diff.Item2, attributes: { src: 'https://picsum.photos/600/400', alt: 'After (Color)' } },
        { tag: Diff.Resizer }
    ]
};

$('#example').content(diff);

const { default: Diff } = await import('/components/data-display/diff.js');
const { tags, $ } = Lightview;
tags.Diff = Diff;
tags['Diff.Item1'] = Diff.Item1;
tags['Diff.Item2'] = Diff.Item2;
tags['Diff.Resizer'] = Diff.Resizer;

const diff = {
    Diff: {
        style: 'max-width: 500px; min-height: 300px;',
        children: [
            { 'Diff.Item1': { src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' } },
            { 'Diff.Item2': { src: 'https://picsum.photos/600/400', alt: 'After (Color)' } },
            { 'Diff.Resizer': {} }
        ]
    }
};

$('#example').content(diff);

<!-- Import the component (registers lv-diff, lv-diff-item1, etc.) -->
<script type="module" src="/components/data-display/diff.js"></script>

<lv-diff style="max-width: 500px; min-height: 300px;">
    <lv-diff-item1 src="https://picsum.photos/600/400?grayscale" alt="Before"></lv-diff-item1>
    <lv-diff-item2 src="https://picsum.photos/600/400" alt="After"></lv-diff-item2>
    <lv-diff-resizer></lv-diff-resizer>
</lv-diff>