<template>
	<view id="container" class="p-10 comp-inherit-attrs-false-composition">
		<text>inheritAttrs: false</text>
		<view class="flex flex-row">
			<text>id: </text>
			<text id="comp-inherit-attrs-false-composition-id">{{ id }}</text>
		</view>
		<view class="flex flex-row">
			<text>class: </text>
			<text id="comp-inherit-attrs-false-composition-class">{{
				className
			}}</text>
		</view>
		<view class="flex flex-row">
			<text>data-test: </text>
			<text id="comp-inherit-attrs-false-composition-data-test">{{
				dataTest
			}}</text>
		</view>
	</view>
</template>

<script setup lang="uts">
defineOptions({
	inheritAttrs: false
})

const id = ref('')
const className = ref('')
const dataTest = ref('')

onMounted(() => {
	const container = getCurrentInstance()!.proxy!.$el as UniElement
	id.value = container.getAttribute('id') ?? ''
	className.value = container.classList.toString()
	dataTest.value = container.getAttribute('data-test') ?? ''
})
</script>