2015-11-10 11 views
8

मुझे उत्सुकता है कि WebComponents के लिए काम में कुछ भी the rules का उल्लंघन किये बिना घोंसला वाले HTML रूपों जैसी चीज़ों को दूर करना संभव बनाता है। मैं पूछ रहा हूं क्योंकि मैं उत्सुक हूं कि वेबकंपोनेंट के आंतरिक को अलग-अलग तत्वों के लिए कैसे अलग किया जाता है। मैं कल्पना कर सकता हूं कि यदि वेबकंपोनेंट्स का उपयोग करके फॉर्मों का घोंसला संभव नहीं है तो इससे समस्याएं हो सकती हैं, जिससे उपभोक्ता घटक के आंतरिक भाग से अवगत नहीं हैं, जिससे समस्याएं उत्पन्न हो सकती हैं।क्या वेब घटक HTML रूपों के घोंसले के लिए अनुमति देते हैं?

किसी भी तरह से मैं खुदाई की बिट किया है और इसलिए मैं लगा मैं अधिक जानकारी के लिए यहां के विशेषज्ञों के साथ परामर्श करना चाहते हैं कुछ भी बारी नहीं कर सका।

संबंधित पोस्ट:

उत्तर

8

यह मेरे लिए एक बहुत ही वैध प्रश्न की तरह लगता है।

जिज्ञासा से, मैंने एक त्वरित fiddle (नीचे प्रदान किया गया) बनाया है जो परीक्षण नेस्टेड रूपों के मामले का उपयोग करता है, जहां कोई छाया रूट के अंदर होता है।

var template = document.querySelector('template'); 
 
var clone = document.importNode(template.content, true); 
 

 
var root = document.querySelector('#host').createShadowRoot(); 
 
root.appendChild(clone); 
 

 
document.querySelector('button').onclick = function(e) { 
 
    var formValues = $('#docForm').serialize(); 
 
    
 
    alert(formValues); 
 
    $('#result').text(formValues); 
 
    return false; 
 
} 
 

 
document.querySelector('#host').shadowRoot.querySelector('button').onclick = function(e) { 
 
    var form = document.querySelector('#host').shadowRoot.querySelector('#shadowForm'); 
 
    
 
    alert($(form).serialize()); 
 
    $('#result').text($(form).serialize()); 
 
    return false; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<template id="template"> 
 
    <form id="shadowForm"> 
 
     <input type="text" name="text"/> 
 
     <button type="submit">Submit shadow form</button> 
 
    </form> 
 
</template> 
 

 

 
<form id="docForm" > 
 
    <table> 
 
    <tr> 
 
     <td> 
 
      <input type="checkbox" name="checkbox"/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <input type="text" val="" name="text"/> 
 
     </td> 
 
     </tr> 
 
    <tr> 
 
     <td> 
 
      <select name="multiple" multiple="multiple"> 
 
       <option>A</option> 
 
       <option>B</option> 
 
       <option>C</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div id="host"></div> 
 
      <button type="submit"> Submit document Form</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form> 
 

 

 
<div id="result"></div>

IMO यह के रूप में की उम्मीद काम करता है, जब आप रूप है जो प्रकाश डोम जो तत्वों में से एक की shadowRoot में एक फार्म भी शामिल है, उन दोनों बिल्कुल ठीक प्रस्तुत करना है सबमिट करें।

कितना अलग एक WebComponent के आंतरिक तत्वों उन्हें शामिल करने वाले

छाया रूट एक विशेष तत्व के साथ जुड़े विभिन्न नोड है पूर्वज हैं, यह नियमित रूप से डोम हेरफेर API के साथ पहुँचा नहीं जा सकता और इसलिए इस मामले में फॉर्म-इन-फॉर्म नियम में प्रकाश डीओएम मार्कअप में हस्तक्षेप नहीं होगा।

मैं कल्पना कर सकता है कि अगर रूपों की नेस्टिंग WebComponents का उपयोग कर ... अगर एक उपभोक्ता घटक के आंतरिक भागों के बारे में पता नहीं है संभव नहीं है।

तो इस सवाल का, उपयोगकर्ता रख सकते हैं जो कुछ भी एचटीएमएल वे पृष्ठ पर चाहते हैं और उसके प्रतिपादन व्यवहार क्या घटक वे उपयोग कर रहे हैं कि घटक कैप्सूलीकरण के लिए छाया डोम उपयोग कर रहा है द्वारा प्रभावित नहीं होगा जवाब देने के लिए।

+0

आपके उत्कृष्ट उत्तर के लिए धन्यवाद! – jpierson

4

आप एक और रूप है जो फिर घोंसला रूपों के लिए आप की अनुमति होगी के लिए एक संदर्भ बनाने के लिए एक वस्तु टैग का उपयोग कर सकते हैं। आप अपने किसी एक फॉर्म या बाहरी पेज/फॉर्म का संदर्भ दे सकते हैं। मैंने इसे HTML5 पृष्ठों के लिए उपयोग किया है लेकिन एएसपी.NET रूपों पर इसका प्रयास नहीं किया है। मुझे कोई कारण नहीं दिख रहा है कि यह उनके साथ क्यों काम नहीं करेगा बशर्ते फॉर्म नाम प्रत्येक के लिए अलग हों। http://smallbusiness.chron.com/embed-external-object-website-57221.html

वे फ्लैश एम्बेड कर रहे हैं लेकिन यह अन्य पृष्ठों के साथ भी काम करता है:

इस पृष्ठ पर एक उदाहरण नहीं है। मुख्य भाग यह है कि आप उस URL को सेट करते हैं जिसे आप 'डेटा' विशेषता में एम्बेड करना चाहते हैं।

संबंधित मुद्दे